HBuilder X中搭建vue-cli项目（一）

一、前端项目结构

传统结构：一个项目中有很多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命令进行手动下载项目依赖。