使用vue-cli创建基于vue.js的iview工程
1、vue-cli 介绍
vue-cli是一个vue.js提供的脚手架,可以快速构造项目结构。
vue-cli本身集成了多种项目模板:
1.simple 很少简单,只有一个html页面
2.webpack 包含ESLint代码规范检查和unit单元测试等
3.webpack-simple 没有代码规范检查和单元测试
4.browserify 使用的也比较多
5.browserify-simple
2.创建vue-cli 工程
1.下载地址:https://github.com/vuejs/vue-cli
2.cnpm install vue-cli -g 全局安装vue-cli,配置vue命令环境
3.vue --version 查看安装的版本
4.vue list 查看安装的模版列表
5.cmd 进入到自己的工作空间
6.vue init webpack vue-cli-webpack 创建一个以webpack为模板的名字为vue-cli-webpack的项目;根据提示默认执行即可。
7.cd vue-cli-webpack 进入生成的项目目录
8.cnpm install 安装依赖模块包
9.npm run dev 启动测试服务
3.引入view
1.cd vue-cli-webpack 进入项目目录
2.cnpm install iview --save 安装view依赖
3.在vue-cli-webpack\src\main.js 文件中引入iview
import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iView)
4. 测试
1、创建iview组件:在vue-cli-webpack\src\components目录下创建一个组件 如:table.vue 代码从iview官方组件中复制
2、配置路由:在vue-cli-webpack\src\router\index.js文件加入以下代码(红色框内的代码为要加入的)
5.打包放入正式环境
1、npm run build 将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
6. 可能遇到的问题
1.编译的时候遇到es6语法错误
原因:大多是json格式没有按照es6语法的规范缩进、空格、去分号等处理。
处理方式:
1、使用eslint工具也格式化。
2、在vue-cli-webpack\build\webpack.base.conf.js文件中去掉检测规则
3、创建项目的时候 Use ESLint to lint your code? (Y/n) 这一步选no