Vue概述

vue-cli搭建项目流程

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板。

主要的功能

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

需要的环境

Node.js

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，

V8 引擎执行 Javascript 的速度非常快，性能非常好。

npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。

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

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

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

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

组件路由

vue router 是 Vue.js 官方的路由管理器。

安装

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

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

npm i vue-router@3.5.3

搭建步骤

1.创建 router 目录

创建 index.js 文件,在其中配置路由

//创建 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.使用路由

<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view/>

3.在 main.js 中配置路由

import router from './router/index.js' 
Vue.use(router); 
new Vue({ 
	el: '#app', 
	router,
	render: h => h(App) 
})

4.路由导航守卫

为路由对象，添加 beforeBach 导航守卫

5.路由嵌套

{
    path: '/main', 
    component: Main, //路由嵌套 在main下面的嵌套子路由
	children:[ 
     {
       	path:"/admin", 
     	component:Admin 
     }
    ] 
}

6.路由传参

ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.