搭建VUE和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的css Vue.use(ElementUI) //使用elementUI