一.为什么搭建Vue-Cli
(1).传统的前端项目结构：
一个项目中有许多html文件，每一个html文件都是相互独立的，
如果需要在页面中导入一些外部依赖的组件，就需要在每一个html文件中都需要导入，非常麻烦
(2).现在的前端项目架构
在一个node环境中构建项目，node(前端开发环境)类似于后端的maven
前端改变为单页面架构（一个项目中只有一个html）
二.node.js安装
(1).下载
Node.js — Download Node.js®
(2).安装
安装成功
(3).测试
三.Vue-Cli搭建
(1).什么是 Vue.js Vue
是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三 大主流框架！
https://v2.cn.vuejs.org/
(2).Vue.js 优点
1.体积小
2.更高的运行效率
3.双向数据绑定,简化 Dom 操作 通过 MVVM 思想实现数据的双向绑定，MVVM 就是将其中的 View 的 状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
4 生态丰富、学习成本低 市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！
四.Vue-cli搭建
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；
需要的环境
Node.js 简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。
npm npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。
使用 HbuilderX 快速搭建一个 vue-cli 项目
出现这个表示创建成功
点击npm run server
或者在终端输入指令
创建成功
安装组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建 单页面应用变得易如反掌。
打开命令行工具，进入你的项目目录，输入下面命令。
npm i vue-router@3.5.3
搭建步骤:
1. 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue'; import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router) /* 定义组件路由 */
var rout = new router({
routes: [ { path: '/index', name: 'index', component: index },
{ path: '/content', component: content } ] }); //导出路由对象
export default rout;
2.使用路由 首页 内容
3.在 main.js 中配置路由
import router from './router/index.js' Vue.use(router); new Vue({
el: '#app',
router,
render: h => h(App) })
6.路由传参 用户 目标组件获取地址参数
this.$route.query.num
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
//导入注册组件
import Login from '../Login.vue';
import Main from '../Main.vue';
import MajorList from '../view/major/MajorList.vue';
import StudentList from '../view/student/StudentList.vue';
//注册 定义组件访问地址
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: "/",
component: Login
},
{
path: '/login',
component: Login
},
{
path: '/main',
component: Main,
children:[
{
path: '/majorlist',
component: MajorList
},
{
path: '/studentlist',
component: StudentList
}
]
}
]
});
//导出路由对象
export default rout;
