前言
在学习完vue基础语法之后，学着利用vue-cli脚手架搭建一个项目，本篇随笔主要记录搭建的过程，供大家一起学习。
具体内容
搭建vue项目的准备工作
1、安装Nodejs、NPM以及VSCode
Nodejs：是一个基于Chrome V8引擎的JavaScript运行环境，它结合NPM一起来管理包。
NPM：是和Nodejs一起安装的包管理工具，可以解决NodeJS代码部署上的诸多问题；常见的使用场景有以下几种：
(1)允许用户从NPM服务器下载别人编写的第三方包到本地使用；
(2)允许用户从NPM服务器下载并安装别人编写的命令程序到本地使用；
(3)允许用户将自己编写的包或命令程序上传到NPM服务器供别人使用；
PS1：Nodejs的安装与普通软件安装一样，但Nodejs安装成功后，就等于安装好了node和npm；可以使用“node -v”命令查看node版本，使用“npm -v”命令查看npm版本。
PS2：VSCode软件的安装与普通软件一样，该软件支持安装各种插件,在项目开发中，可以根据需要选择安装不同的插件。
2、全局安装webpack
命令：npm install webpack -g
PS：全局安装的包、模块默认保存在C盘用户目录文件夹下
具体路径为：C:\Users\wangqin\AppData\Roaming\npm
3、全局安装vue
命令：npm install vue -g
【补充说明】以上都是使用npm来进行安装的，由于使用npm下载资源需要*，导致下载速度极慢，所以可以使用cnpm来进行安装(命令：npm install cnpm -g --registry=https://registry.npm.taobao.org)
=======================================================
Vue-cli脚手架搭建Vue项目
1、全局安装vue-cli
命令：cnpm install vue-cli -g
2、创建项目工程
在自己的项目目录下，运行如下命令来创建项目工程：
命令：vue init webpack + 项目名称
eg： vue init webpack netSystem
PS：项目名称不能为中文名称；在创建项目工程时，命令提示符窗口会一步一步给出很多提示信息，根据自身项目开发需求，输入Y/N即可。以下列出了其中一些提示信息及其说明：
|
提示信息
|
说明
|
|
Project name
|
项目名称；默认是创建时输入的项目名称；当然还可以直接修改，回车即可
|
|
Project description
|
项目描述；同样可以输入项目描述内容
|
|
Author
|
项目创建者 |
|
Install vue-router?(Y/N)
|
是否需要vue-router，默认选择使用，因为这样生成好的项目就会有相关的路由配置文件
|
|
Use ESLint to lint your code?(Y/N)
|
是否使用ESLint，默认使用，这样生成的项目会生成相关的ESLint配置
|
|
......
|
......
|
在项目创建完成之后，会生成一个默认的项目目录，下面对项目目录中的主要文件及文件夹进行说明：
| 项目文件、文件夹说明 | 说明 | 备注 |
| build文件夹 | 此文件夹主要是对webpack的配置 |
webpack.base.config.js 基本webpack配置
webpack.dev.config.js 开发环境配置
webpack.prod.config.js 生产环境配置
......
这些文件里已经完成一些简单配置，包括入口文件、插件、loader、热更新等；我们可以根据实际项目需求来进行相应的配置。
|
| config文件夹 |
这个文件夹下包括3个文件，最主要的是index.js这个文件，它是进行配置代理服务器的文件
 |
dev.env.js 开发环境
prod.env.js 生产环境
index.js
在index.js中配置代理服务器，这个和我们前端项目开发息息相关，和后端联调就需要在该文件夹中设置一个地址，这个地址是对应后端的地址；在“proxyTable”下的“target”属性里设置代理地址。此外，在使用webpack做构建工具的项目中使用proxyable代理解决跨域是一种比较方便的选择。
实现机制：
本地服务器->代理->目标服务器->获取到数据后通过代理伪装成本地服务器请求的返回值->浏览器获取到数据并进行渲染展示
|
| src文件夹 | 此文件夹包含所有主要程序文件和文件夹，也是使用频率最高的一个文件夹 |
assets 此文件夹存放公用的样式、图片等
components 此文件夹存放所有的vue组件
router 此文件夹下的index.js是一个路由设置文件
App.vue 此文件是vue项目入口文件
main.js 此文件也是入口文件，对应webpack.base.config.js文件里的entry
|
| static文件夹 | 此文件夹一般存放一些静态资源 | 该文件夹内存放的资源可以直接引入到项目中使用 |
| package.json | 此文件内保存着项目中所有依赖包及其包版本号信息；主要包括2部分内容 |
第一部分是scripts，可以在scripts里设置命令；例如设置了server用于调试,则我们启项目时输入的是npm run server;例如设置了build，则是输入
npm run build用于打包；
第二部分是dependencies和devDependencies，这里是项目中需要的依赖包，分别对应全局下载的依赖包和局部下载的依赖包
|
| ...... | ...... | ...... |
3、验证项目是否可运行
在创建完成项目之后，需要验证项目是否可以运行起来
命令：cnpm run XXX （eg:cnpm run dev / cnpm run server）
PS：这里XXX根据package.json文件的配置而定
结束语
学会搭建vue项目，并且了解使用vue搭建项目的目录文件，对后期项目开发起到足够大的帮助。