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脚手架时很容易出错，搞得很多人包括我自己都摸不着头脑。这里有个教训就是，报错要学会耐心的看调试模式下提示的错误，不懂就去百度，对于英语较为好的这里有比较大的好处，怎么提示错误就怎么解决错误，就是这么简单。