Element UI 框架搭建
1、webpack 全局安裝
|
1
|
npm install -g webpack
|
2、淘寶鏡像cnpm安裝
|
1
|
npm install -g cnpm --registry=https:
//registry.npm.taobao.org
|
3、vue腳手架全局安裝 -- 用於生成vue模板
|
1
|
npm install -g vue-cli
|
4、使用腳手架構建vue項目 -- 一路回車就行了
|
1
|
vue init webpack
|
目前可用的模板介紹
|
1
2
3
4
|
browserify–全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試。
browserify-simple–一個簡易的Browserify + vueify，以便於快速開始。
webpack–全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試。
webpack-simple–一個簡易的Webpack + vueify，以便於快速開始。
|
5、element-ui安裝
|
1
|
npm i element-ui
|
6、依賴安裝，這里用cnpm安裝，因為依賴太多不然，不然讓你等的蛋疼 -- 會在項目中生成一個node_modules文件
|
1
|
cnpm install
|
大功告成，這里可以運行了
|
1
|
npm run dev
|
vue項目的構建到現在就算完成了，那么現在就引入element-ui組件模塊
這里以radio組件為例
1、在\element-ui\src\components\新建個vue組件，組件名為radio
radio組件代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<template>
<el-radio-
group
v-model=
"radio2"
>
<el-radio :label=
"3"
>備選項</el-radio>
<el-radio :label=
"6"
>備選項</el-radio>
<el-radio :label=
"9"
>備選項</el-radio>
</el-radio-
group
>
</template>
<script>
export
default
{
data () {
return
{
radio2: 3
};
}
}
</script>
|
2、在element-ui\src\router.js中設置路由
|
1
2
3
4
5
6
7
|
import radio
from
'@/components/radio'
//引入剛創建的組件
//設置路由
{
path:
'/radio'
,
name:
'radio'
,
component: radio
}
|
3、在\element-ui\src\main.js中加入element-ui的js和css
|
1
2
3
|
import ElementUI
from
'element-ui'
//element-ui的全部組件
import
'element-ui/lib/theme-chalk/index.css'
//element-ui的css
Vue.use(ElementUI)
//使用elementUI
|
大功告成，運行后的效果就是這個樣子
總結：在使用初學vue腳手架時很容易出錯，搞得很多人包括我自己都摸不着頭腦。這里有個教訓就是，報錯要學會耐心的看調試模式下提示的錯誤，不懂就去百度，對於英語較為好的這里有比較大的好處，怎么提示錯誤就怎么解決錯誤，就是這么簡單。