前端VUE

框架

就是对某一方面技术的完整封装，是一套完整的解决方案

会把很多的基础功能封装实现,开发人员在框架的基础上进行开发.
代码简洁,开发效率,运行效率都会提高.

vue.js

是一个js框架,对原生的js进行了封装. 简化了js操作的语法
Vue.js 是前端的主流框架之一， 和 Angular.js、React.js 一起，并成为前端三大主流框架！

Vue指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

v-text	设置标签的文本内容
v-html	内容中有 html 结构会被解析为标签
v-on	为元素绑定事件
v-model	设置和获取表单元素的值
v-show	根据真假切换元素的显示状态
v-if	根据表达式的真假切换元素的显示状态
v-bind	为元素绑定属性

vue-cli 搭建项目

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

环境：

Node.js 就是运行在服务端的 JavaScript。

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

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

创建成功后,点击文件目录，点击终端（或使用快捷键Alt+C)
在命令行窗口启动项目,npm run serve
具体命令需要看配置文件中如何定义
启动成功后,会出现访问项目地址: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 文件,在其中配置路由

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 导航守卫
   to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数

rout.beforeEach((to,from,next)=>{
if(to.path=='/login'){如果用户访问的登录页，直接放行
return next();
}else{
var token = window.sessionStorage.getItem("token");
if(token==null){
return next("/login");
}else{
next();
}
}
})```
5.路由嵌套
```{
path: '/main',
component: Main, //路由嵌套 在 main 下面的嵌套子路由
children:[
{
path:"/admin",
component:Admin
}
]
}

ElementUI

是一个UI框架(html和css的封装),
提供丰富的前端组件(表单,表格组件,对话框)
在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');

网络请求
axios 是一个 HTTP 的网络请求库.
安装 npm install axios
在 main.js 中配置 axios
导入 axios
import axios from ‘axios’;
设置访问后台服务器地址
axios.defaults.baseURL=“http://127.0.0.1:9999/api/”;
将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
Vue.prototype.$http=axios;