使用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