一、前端项目结构
传统结构 ：一个项目中有很多HTML文件,一个HTML文件就是一个网页。他们之间彼此独立,互相没有联系,我们每次导入其它前端文件时,需要给每一个HTML文件都导入,需要导入的文件一旦过多,就会很麻烦,并且整体看来很乱。
现代结构 ：在一个node环境中构建项目(类似于后端的maven),前端改为单页面结构,只有一个HTML文件,所有的配置都是基于这一个HTML文件进行配置,只需要配置一次即可.但是可以有很多的.vue文件,这些不再是一个网页,而是被称为一个组件,需要显示不同的内容时,只需要切换组件即可
二、 安装Node.js前端环境
Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时 允许开发人员创建服务器、Web 应用程序、 命令行工具和脚本。
nvm是一种流行的运行Node.js方式。它允许您轻松切换Node.js版本，并安装新版本，以便在出现问题时尝试轻松回滚。使用旧版本测试代码也非常有用Node.js版本。
NPM是包含在Node.js里的包管理工具，它具有以下功能：
（1）、允许用户从NPM服务器下载别人编写的第三方包到本地使用。
（2）、允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。
来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。
2.1、下载:https://nodejs.org/en/download
2. HBuilder X创建一个vue-cli项目
基本结构创建完成后，HBuilder X会自动创建一个Vue项目的基本结构和文件
创建成功后,打开vue项目的终端输入 ： npm run serve指令回车进行运行
项目运行:也 可以打开HBuilder X的终端,输入命令npm run serve
**终止项目:**ctrl+c
打包项目: npm run build
打包项目，生成一个dist文件夹 ，类似于maven的打包功能
下载项目依赖： npm install
下载并安装项目依赖，即node_modules 。由于我们项目的大小90%都是项目依赖所占用，因此通常在给他人发送我们的代码时不用发送node_modules文件夹，对方在接收后通过在终端输入npm install命令进行手动下载项目依赖。