vue-cli搭建项目过程

一.前言

传统的前端项目架构：

指的就是一个项目中有很多个HTML文件，每一个HTML文件都是相互独立的，如果需要在页面中导入一些外部依赖的css,js文件，就需要在每一个html文件中都导入就会显得特别麻烦，而且这些外部依赖的css，js文件还都需要我们去官网下载。

现在的前端项目架构：

在一个node环境中构建项目，node(前端的开发环境)类似于后端的maven，与传统的前端项目架构不同的是，现在的前端项目架构中改为了单页面架构(一个项目中只有一个.html文件)，切换页面也是通过主页面去调用其他的组件(.vue文件)实现的。

二.什么是vue-cli？

   vue-cli是官方提供的一个脚手架，用于快速生成vue的项目模板，预先定义好的目录结构及基础代码，就好比在IDEA中创建maven项目时可以选择一个骨架项目，这个骨架项目就叫脚手架，可以使我们开发更为迅速。

1.主要的功能

1.具有统一的目录结构

2.可以本地调试

3.热部署

4.单元测试

5.集成打包上线

2.需要配置的环境

Node.js

简单地说Node.js就是前端js运行环境或者说是js语言解释器。

Node.js官方网址：

https://nodejs.org/en/download

测试Node.js环境是否安装完成：

打开控制台(ctrl+r)，输入node -v和npm -v，如果出现下面版本号证明安装环境完成。