1.vue-cli 概述

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板，预先定义好的目录结构及基础代码

比如之前学过的Maven,在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速

2.主要的功能

①统一的目录结构

②本地调试

③ 热部署

④单元测试

⑤集成打包上线

3.需要的环境

①Node.js

简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器

②npm

npm 是 Node.js 的 包管理工具 ，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表，有超过 60 万个JavaScript 代码包可供下载，npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码

---

● 使用 HbuilderX 快速搭建一个 vue-cli 项目

● 创建成功后,在命令行窗口启动项目

启动项目命令：npm run serve 

启动成功后,会出现访问项目地址: http://127.0.0.1:8080/

在命令行中 ctrl+c 停止服务

具体命令需要看配置文件中如何定义

4.组件路由

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

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的

---

打开命令行工具，进入你的项目目录，输入下面命令

npm i vue-router@3.5.3

5.vue-cli搭建具体步骤

先删除一些文件

①删除src目录下的components

②删除package-lock.json 

③打开src目录下的App.vue

 删除选中的内容并修改

第一步：创建组件 

举例三个组件分别为登录组件，注册组件和首页组件，在src目录下面创建以下三个组件文件

第二步：在index.js中配置路由

/* 为组件配置路由地址 */
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */

/* 导入自己的组件 */
import Index from '../Index.vue'; 
import Login from '../Login.vue'; 
import Reg from '../Reg.vue'; 
/* 注册 定义组件访问地址 */
Vue.use(router);
/* 定义组件路由 */
var rout = new router({
    routes: [
		{
			path:"/",
			component:Index
		},
        {
            path: '/index',
            component: Index
        },
        {
            path: '/login',
            component: Login
        },
    	{
    	    path: '/reg',
    	    component: Reg
    	}
    ]
});
//导出路由对象
export default rout;

第三步：在 main.js 中配置路由

在src目录下找到 main.js文件，在其中配置路由

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//导入组件路由配置
import router from './router/index.js'
Vue.use(router);

new Vue({
  render: h => h(App),
  router, //进行挂载
}).$mount('#app')