vue2.0項目引入element-ui

在項目中，為了方便我們工作和開發效率，常常引入一些框架來幫助我們完成高效的工作，今天我們就用vue來搭建一下框架，並且引入element-ui這個框架。安裝流程也是我從失敗中摸索到的，希望能幫助大家。

1.我們先安裝vue腳手架

• cnpm install vue-cli -g  全局安裝
• 我使用的是cnpm；來進行安裝的，大家可以去淘寶鏡像下載安裝cnpm
• 安裝完成之后使用： vue --help / --version/ -V 命令檢測是否安裝成功

2.使用vue-cli創建腳手架

• vue init webpack mywebpack   
• mywebpack   項目名稱

3.進入 mywebpack這個目錄 

• 初始化 cnpm  install

4.安裝 Element-ui框架

1. 先安裝 loader模塊

　　　　cnpm install style-loader -D
　　　　cnpm install css-loader -D
　　　　cnpm install file-loader -D

　　　2.安裝Element-ui模塊

　　　　cnpm install element-ui --save

5.修改webpack.base.conf.js 添加一下代碼：

我們在項目中找到build文件，文件有一個webpack.base.conf.js在這里面修改代碼，

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

6.引入Element,打開項目 找到src/main.js目錄，添加一下代碼

import Element from 'element-ui 
import 'element-ui/lib/theme-chalk/index.css'如果引入這個方法報錯，則引入下面方法
import '../node_modules/element-ui/lib/theme-default/index.css'

Vue.use(Element)

7.運行項目
cnpm run dev

8.測試是否成功

<el-button type="primary">主要按鈕</el-button>
<el-button type="text">文字按鈕</el-button>