vue-cli搭建过程（HBuilder X搭建）

vue.js:前端主流框架（对某一方面技术完整的封装，是一套完善的解决方案）

vue-cli搭建项目（官方提供脚手架）

vue脚手架：是一套项目搭建的快捷方式，可以将项目中的依赖集成进来，生成统一的项目结构，方便测试、打包。

使用前提：

①需要在前端安装node环境 （js语言解释器）。

②npm：node.js包管理工具

---

Node.js的安装

下载 | Node.js

官网下载并安装，因为这里所搭建的vue2版本，所以对node的版本和npm版本要求不能太高，node 是v13.14.0，npm是v6.14.4。

 

 

 这里不勾选。

 

点击Install，立即安装 

 

安装完成。

打开 cmd测试，查看node和npm版本，安装成功！

vue-cli的搭建

新建项目，在普通项目中找到vue（2.6.10）的版本

稍等片刻即可。 

 

创建成功！ 

 

一个完整的vue项目目录

 

打开控制台

 

输 入npm run serve.

注意需要在当前目录路径下打开。

如果失败，点击运行，继续点npm run serve

出现如下图所示即表示运行成功，可通过链接地址即可访问当前项目

 

 在命令行中通过CTRL+c停止服务。

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

打开命令行，进入项目目录，输入npm i vue-routere@3.5.3