搭建项目（vue-cli脚手架搭建项目-webapck模板）

一、vue-cli脚手架简介

1、vue-cli是一个vue脚手架，可以快速构造项目结构。

2、vue-cli本身集成了多种项目模板：

• 　　simple 　　很少简单
• 　　webpack　　包含ESLint代码规范检查、单元测试等
• 　　webpack-simple　　简化版的webpack，没有代码规范检查、单元测试
• 　　browserify　　　　使用的也相对较多
• 　　browserify-simple　　简化版的browserify，没有代码规范检查、单元测试
• 　　pwa

 

二、vue-cli的使用

1、安装vue-cli

•  运行 cnpm install vue-cli -g　　全局安装vue-cli
• 运行vue
  
•  运行vue --version　　查看安装的vue-cli的版本
  
•  运行vue list　　查看安装的vue-cli可用模板列表

 　

 

2、初始化项目，生成项目模板

• vue init 模板名 项目名

使用webpack模板搭建项目

运行 vue init webpack vue-cli-demo2 （使用webpack模板，自定义项目名为vue-cli-demo2）

• 项目名称     enter
• 项目描述    enter
• 项目作者    enter
• 选择运行+编译/直接运行？运行+编译
• 选择是否需要vue-router？no
• 选择是否使用ESLint？是，选择标准的规则。
• 是否使用单元测试？no
• 是否启用e2e测试？no
• 是否使用npm安装模块包？yes （注意：在这里选择yes，则直接安装node_modules里面的模块包）

说明：ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等；要求比较严格。官网：http://eslint.org

完成后创建项目vue-cli-demo2成功！

 

 进入vueStudy文件夹，可以看到成功创建了项目vue-cli-demo2，且自动生成了对应文件（比使用webpack-wimple模板多很多文件）

 分别打开自动生成的6个文件。查看自动生成的代码：

1） index.html

 

 2）package.json

 3） webpack.config.js

4）App.vue

 

  5) main.js

 

  6) .babelrc

 

 

3、进入生成的项目目录，安装模块包

• cd vue-cli-demo2　进入生成的项目目录（vue-cli-demo是自定义的项目名称）　
• cnpm install 安装模块包

注意：如果在创建项目的时候选择yes后，这里就不需要重新执行安装了。

安装完成后，生成node_modules文件夹，里面包所有安装包。

 

 

4、运行

• npm run dev　　//启动测试服务（此时看不到dist文件夹和build.js文件，只有在生产运行了npm run build后才可以看到）

自动打开浏览器，自动显示App.vue里面的内容。

 

 

• npm run bulid 　//将项目打包输出dist目录，项目上线将dist目录拷贝到服务器上