利用VUE-CLI脚手架搭建VUE项目

前言

　　在学习完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搭建项目的目录文件，对后期项目开发起到足够大的帮助。