Vue(一)使用脚手架搭建项目结构

什么是vue-cli

vue-cli 是一个脚手架工具，可以帮助开发者快速创建 vue 项目需要的骨架文件

官网

有什么好处

• 不必自己搭建项目主结构文件目录
• 不必自己安装项目通用功能模块
• 不必自己给webpack做主要配置和loader安装配置
• 使得开发人员的全部精力集中在业务层面上

使用

运行如下指令，安装 vue-cli工具

(带上 -g 参数，设置为全局安装，使得在系统的任何目录都可以使用)

npm install -g vue-cli			// 安装操作
npm un -g vue-cli				// 卸载操作

vue-cli分为2和3两个版本，前期先使用2版本即vue-cli，后期再对3版本做说明

查看安装好的vue-cli

vue-cli工具安装完毕就可以通过如下指令初始化项目了(我们此处以pro01的项目名为例)

vue init webpack my-project   // 初始化项目

接下来会提示如下参数选项(参考配置即可)：

命令执行完毕会在…\Code\目录下自动形成pro01文件目录，内部是创建好的项目主结构文件

效果如下：

主结构文件说明：

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     	// 生产环境构建代码
|   |-- check-version.js             	// 检查node、npm等版本
|   |-- logo.png                     	// logo图片
|   |-- utils.js                     	// 构建工具相关
|   |-- vue-loader.conf.js				// vue-loader配置
|   |-- webpack.base.conf.js**         	// webpack基础配置
|   |-- webpack.dev.conf.js**          	// webpack开发环境配置
|   |-- webpack.prod.conf.js**         	// webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   	// 开发环境配置
|   |-- index.js**                     	// 项目主要配置(包括监听端口，打包路径等)
|   |-- prod.env.js                  	// 生产环境配置
|-- src                              // 源码目录
|   |-- assets						   // 静态资源 
|   |-- components**                     // vue公共组件
|   |-- router**                         // vue路由
|   |-- App.vue**                        // 页面入口文件
|   |-- main.js**                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcssrc.js                    // post-loader的插件配置文件
|-- index.html**                       // 入口页面
|-- package.json                     // 项目基本信息
|-- package-lock.json                // 锁定当前安装的包的依赖
|-- README.md                        // 项目说明

配置

根据需要可以给vue-cli创建好的项目做基本配置

• 给package.json做打包参数配置

line: 在线运行指令参数

pack：物理打包指令参数

• 在config/index.js文件中设置项目运行主机名、端口、自动开启浏览器 的设置

  在线运行项目会自动开启浏览器

  autoOpenBrowser: true
  

运行效果：

小结

1. vue-cli脚手架工具，可以辅助快速创建项目结构文件
2. 安装完毕系统就有一个vue的指令可供生成项目主结构文件使用
3. 创建项目主结构文件的同时，可以根据需要同时安装 路由、vue、eslint等常用功能包

给项目安装less扩展包

通过vue-cli创建的项目主结构文件，默认没有less扩展包的，请安装

运行指令：

npm install -D less less-loader

(安装完毕，不需要配置，重启webpack即可)

小结

vue-cli创建项目主结构文件的同时也会创建项目的文件目录，因此不要做重复了

创建好的项目主结构文件可以做自定义配置，例如：package.json、config/index.js、.prettierrc等

vue-cli默认没有安装less-loader/less 依赖包，需要自行安装