vue2.0專案引入element-ui

小周sri的碼農發表於2018-04-11
VueUI

在專案中，為了方便我們工作和開發效率，常常引入一些框架來幫助我們完成高效的工作，今天我們就用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>

相關文章