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

一、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-simple模板搭建项目

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

　往下一步一步填写项目名称、项目描述、作者、是否使用saas。完成后创建项目成功。

 

　进入vueStudy文件夹，可以看到成功创建了项目vue-cli-demo，且自动生成了对应文件。

 

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

1） index.html

2）package.json

 3） webpack.config.js

4）App.vue

 5) main.js

 6) .babelrc

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

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

安装完成后，生成node_modules

4、运行

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

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

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