【Vue CLI】从安装到构建项目再到目录结构的说明

"Vue CLI是一个基于Vue.js进行快速开发的完整系统.

Vue CLI致力于将Vue生态中的工具基础标准化。它确保了各类构建工具只需给予智能的默认配置即可平稳衔接.

这样咱们就能够专一在撰写应用上，而没必要花好几天去纠结配置的问题。于此同时，它还为每一个工具提供了调整配置的灵活性.

Vue CLI的概念：
·
通俗的说，Vue Cli是咱们建立大型项目时的"脚手架".
所谓的脚手架，就是帮助咱们建设好了建造大厦的所需模块，建设者只需往模块里面填入实质的内容，便可完成大厦的建设.
对于程序开发来讲，脚手架使程序员只须要关注业务逻辑的实现上面，咱们不须要再关注兼容性问题，不须要再浪费时间在重复的工做上.
·
Vue Cli可以帮助咱们快速的构建大型Web应用，提高了咱们的开发效率.
Vue Cli是基于Webpack构建的，并带有合理的默认配置.

 

Vue CLI的安装：
·
这里咱们将使用npm全局安装Vue Cli 2版本.
Vue Cli 2和Vue Cli 3的安装方式略有不一样，由于Vue Cli 3将包名称由vue-cli改为了@vue/cli.
下面是使用npm方式全局和本地安装Vue Cli 2和Vue Cli 3的命令：
·
全局安装：
npm install -g vue-cli 版本2
npm install -g @vue/cli 版本3
·
本地安装：
npm install vue-cli --save 版本2
npm install @vue/cli --save 版本3
·
npm的安装命令可简写为：npm i xxxx
·
补充：若是是Mac系统，可能须要加上sudo（权限问题，包括本文中后续的全部命令），即：sudo npm install -g vue-cli，回车后输入当前用户的密码便可.

@

目录

• 1. 构建咱们的项目
• 2. 目录结构说明
  • 2.1 build目录
  • 2.2 config目录
  • 2.3 src目录
  • 2.4 static目录

 

---

1. 构建咱们的项目

步骤一：
首先，咱们打开终端，输入安装命令：npm i -g vue-cli.
（这里咱们使用全局安装方式安装Vue Cli 2版本）.

步骤二：
而后，咱们进入本身的工做目录，输入vue init webpack vue-demo来构建一个名为vue-demo的项目.
过程当中会提示咱们输入一些信息，若是出现提示是否须要安装VueRouter和单元测试等功能，那么请根据你的项目实际需求输入Yes/No，这里咱们将按照下图进行输入：

步骤三：
构建完成以后，会在咱们的工做目录中生成一个名为vue-demo的文件夹.
咱们进入此文件夹，能够看到项目结构以下：

此时，咱们打开终端，进入刚刚生成的vue-demo文件夹，输入启动命令：npm run dev.
最后，在浏览器中访问：http://localhost:8080/ ，
到这里，咱们的Vue项目已经构建完成了.
下面咱们来看看项目根目录下的各目录和文件的功能.

---

2. 目录结构说明

2.1 build目录

build目录中的文件主要用于webpack配置.

重要的三个文件：

1. webpack.base.conf.js：用于基本webpack配置.
2. webpack.dev.conf.js：用于开发环境webpack配置.
3. web pack.prod.conf.js：用于生产环境webpack配置.

nom run build命令是用来构建生产环境的，而build.js文件就是该命令的入口配置文件，主要用于生产环境.

2.2 config目录

config目录中的文件是用来配置项目测试和运行环境的.

在index.js文件中有一个proxyTable属性，该属性的属性值若是加上对应的后台地址和端口，即可以和后台进行联调.

2.3 src目录

src目录存放的是咱们的项目源文件，它是整个项目使用频率最高的文件夹.

assets目录存放的是公共的资源，会被webpack当成模块资源处理；
components目录存放的是咱们整个项目的全部组件；
router目录存放的是咱们整个项目的路由文件；
App.vue文件是全部vue文件的出口；
main.js文件对应App.vue文件，用于建立vue实例，也是入口文件，对应web pack.base.config.js文件里的入口配置文件.

2.4 static目录

该目录用来存储项目的静态文件，它是真正的静态资源，彻底不被webpack处理.