使用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文件加入以下代码(红色框内的代码为要加入的)

使用vue-cli创建基于vue.js的iview工程 

5.打包放入正式环境

1、npm run build   将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上

6. 可能遇到的问题

1.编译的时候遇到es6语法错误

原因:大多是json格式没有按照es6语法的规范缩进、空格、去分号等处理。

处理方式:

1、使用eslint工具也格式化。

2、在vue-cli-webpack\build\webpack.base.conf.js文件中去掉检测规则

 使用vue-cli创建基于vue.js的iview工程

3、创建项目的时候  Use ESLint to lint your code? (Y/n) 这一步选no

相关推荐