摘要：
Webpack–全功能Webpack+vueify，包括热加载、静态测试和单元测试。Webpack simple–一个简单的Webpack+vueify，用于快速启动。这里的一个教训是，在报告错误时，你应该学会耐心地阅读调试模式中提示的错误，如果你不理解，就去百度。对于那些英语更好的人来说，这是一个很大的优势。它就像如何提示错误和如何解决错误一样简单。
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-uisrccomponents新建个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-uisrc outer.js中设置路由
1 2 3 4 5 6 7 | import radio from '@/components/radio' //引入刚创建的组件//设置路由{ path: '/radio', name: 'radio', component: radio} |
3、在element-uisrcmain.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的cssVue.use(ElementUI) //使用elementUI |
大功告成，运行后的效果就是这个样子
总结：在使用初学vue脚手架时很容易出错，搞得很多人包括我自己都摸不着头脑。这里有个教训就是，报错要学会耐心的看调试模式下提示的错误，不懂就去百度，对于英语较为好的这里有比较大的好处，怎么提示错误就怎么解决错误，就是这么简单。