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

原创

无名大侠01 2021-08-11 16:11:07 ©著作权

文章标签 生产环境配置文件 .net 目录结构当前用户 文章分类 .Net 后端开发

©著作权归作者所有：来自51CTO博客作者无名大侠01的原创作品，请联系作者获取转载授权，否则将追究法律责任

"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. 目录结构说明

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配置.

重要的三个文件：

webpack.base.conf.js：用于基本webpack配置.
webpack.dev.conf.js：用于开发环境webpack配置.
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文件里的入口配置文件.