從新建vue項目到引入組件Element

一、新建項目

1.查看 node和npm是不是已經安裝好命令：node -v npm -v (沒有安裝的先安裝環境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org (安裝國內的淘寶鏡像文件，后面的安裝npm可以全部改為cnpm) 3.安裝 vue-cli 1、cnpm install -g vue2、cnpm install -g vue-cli 4. 安裝 webpack cnpm install -g webpack 5.cd 你的運行目錄 6.新建vue項目 vue init webpack vuedemo 7.進入項目目錄 cd vuedemo 8.安裝依賴 cnpm install 9.運行項目 cnpm run dev 10.發布項目 cnpm run build 注：mac電腦需要在安裝淘寶鏡像前執行： sudo chown -R $USER /usr/local

二、使用element-ui前需安裝修改的配置：

1. 安裝 loader 模塊：cnpm install style-loader -Dcnpm install css-loader -Dcnpm install file-loader -D 2. 安裝 Element-UI 模塊cnpm install element-ui --save 3. 修改 webpack.base.conf.js 的配置，位置：如下圖：

?

下面是需添加的代碼：

{test: /\\\\\\\\.css$/,loader: "style!css"},{test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,loader: "file"}

三、引入Element，前面已經全局安裝了element-ui，只需要在Vue項目中引入即可

1、打開項目：src/main.js,添加下面三條import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

?

四、然后在.vue文件里就直接可以用了

例如：做一下修改,加入element-button按鈕： <template> <div class="login"><form name = 'form' action=""><input id="username" type="text" placeholder="請輸入手機號碼或用戶名" /><input id='pwd' type="password" placeholder="請輸入密碼" /><button onclick="login()">登錄</button></form><div class="account"><p class="forget" style="float:right">忘記密碼?</p><div class="register"><span>還沒有賬號?</span><a href="#">手機注冊</a></div></div><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="text">文字按鈕</el-button></div> </template>

五、成功后的截圖：

?

總結

以上是生活随笔為你收集整理的vue2.0项目引入element-ui的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。