1.webpack 全局安装
npm install -g webpack
2.淘宝镜像cnpm安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.vue脚手架全局安装 -- 用于生成vue模板
npm install -g vue-cli
4.使用脚手架构建vue项目 -- 一路回车就行了
vue init webpack
如果提示vue不是内部或外部命令说明没有配置环境变量,找到vue.cmd所在目录,加到环境变量path里
目前可用的模板:
browserify:全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
browserify-simple:一个简易的Browserify + vueify,以便于快速开始。
webpack:全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
webpack-simple:一个简易的Webpack + vueify,以便于快速开始。
5.element-ui安装
npm i element-ui
6.依赖安装,这里用cnpm安装,因为依赖太多耗时很长,最后会在项目中生成一个node_modules文件
cnpm install
7.大功告成,这里可以运行了
npm run dev
vue项目的构建到现在就算完成了,那么现在就引入element-ui组件模块,这里以radio组件为例
1.在\element-ui\src\components\新建个vue组件,组件名为radio
radio组件代码
<template>
<el-radio-group v-model="value">
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项2</el-radio>
<el-radio :label="3">选项3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
value: 3
};
}
}
</script>
2.在element-ui\src\router.js中设置路由
import radio from '@/components/radio' //引入刚创建的组件
//设置路由
{
path: '/radio',
name: 'radio',
component: radio
}
如图
3.在\element-ui\src\main.js中加入element-ui的js和css
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
如图
4.大功告成,运行后的效果就是这个样子
最后,项目初始时,默认安装ESLint(ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码)的原因,关闭ESLint方法: 将下图中的代码注释掉重启即可