【简单了解VUE的一些特性】
vue.js
回顾前端的一些概念
逻辑，判断，循环
事件，浏览器事件，DOM事件（操作节点，
视图，html，css，（参考bootstrap可视化布局系统，可以自动生成然后查看代码，laiUI只对个人免费）
通信：ajax
VUE，国人开发，渐进式JS框架，只关注视图层（html，css，js）
网络通信：axios
页面跳转：vue-router
vue-UI：ice，elementUI等
注意，正规开发CSS一般不会直接使用，通常采用CSS预处理器生成CSS来使用
例如，SASS，LESS（推荐）
ES系列现在通常为ES5，ES6，
webpack：一种前端的打包方式
JS框架：
jquery，Angular，React，vue，axio
而vue结合了Angular和React的一些特点，其特点包括虚拟Dom，组件特性，支持mvvm，还有模块特性（mvc）。
NPM：类似maven，可以自动下载依赖包
vue-element-admin：使用vue，element等技术
MVVM：异步通信为主（model，view，viewmodel）
第一个vue项目
虽然vue是前端的框架，前端的开发软件多是submit（简洁）
用idea加入插件后就可以开发VUE了
MVVM：
vm沟通view和model，通过vm可以不刷新就更新view。
但是MVVM的思想是让view独立于model，实现低耦合，也就是说数据是vm内的data属性提供的，数据变化（model）变化不会影响标签；同样，view（dom标签）变化也不会影响数据的变化。
因为view（比如<h 2>{{message}}</ h 2>）,message由js里的data的message提供，所以这就是数据绑定，同样的，因为绑定，所以操作message就可以改变view中的dom节点，而不是直接操作dom，这就是虚拟dom
在MVVM中，Vue.js就是ViewModel（mv）的实现者
VUE的一些基本语法
el为元素，data为数据
可以插件导入也可以使用在线的cdn min版
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
v标签：
v-bind :绑定元素
v-if 和v-else ，还有v-else-if
语法格式举例：
<h1 v-if="type==='A'">A</h1>
注意：===表示类型和数据均相等，==只表示数据相等
在这里调用是通过new对象vm，然后vm.xxx实现的
v-for：循环标签 v-for="item in items"
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue基础语法</title>
</head>
<body>
<div id="app1">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<div id ="app">
{{message}}
</div>
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
var vm1 = new Vue({
el:"#app",
data: {
message:"xx",
}
});
var vm = new Vue({
el: "#app1",
data: {
message: "hello",
type:'A',
items: [
{message:'感动猫'},
{message: '挨打猫'},
{message:'印花布'},
]
}
});
</script>
</body>
</html>
关于VUE事件绑定
在js中的data后可以添加methods块，里面包括function函数；
以最常见的鼠标事件为例：
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue事件绑定</title>
</head>
<body>
<div id ="app">
<button v-on:click="hi">on click</button>
</div>
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
var vm1 = new Vue({
el:"#app",
data: {
message:"xx",
},
methods: {
hi: function () {
alert("你好，旅行者");
}
}
});
</script>
</body>
</html>
VUE双向绑定：
双向指的是view-model绑定
比如输入文本数据后让另一个视图也随之变化：
<div>
输入的文本：<input type="text" v-model="message"> {{message}}
</div>
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message:"bilibili"
},
});
</script>
同理，可以显示我们选择的单选框属性或者下拉菜单里的某项。
使用v-model后其优先级会高于value和checked（默认值）等。
VUE组件
所谓vue组件，就是自定义的合法标签，是可重复使用的模板
例如：
我们要自定义一个标签miku
在js标签内添加
Vue.component("jo",{
props: ['item'],
template: '<li>{{}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
item:["讲究猫","神社猫","打拳猫"]
}
});
props是用来传递data参数的，我刚刚拼写错误，props没有生效，页面运行后只会显示三个黑点点，即空的item列表
完整版如下;
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
</head>
<body>
<div id ="app">
<miku v-for="item in items" v-bind:mi="item"></miku>
</div>
<script src=https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js></script>
<script>
Vue.component("miku",{
props: ['mi'],
template: '<li>{{mi}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
items:["讲究猫","神社猫","打拳猫"]
}
});
</script>
</body>
</html>
AXIOS通信
空耳：（阿西奥斯）
注意：axios是基于es6来编写的
使用理由： vue关注视图层，所以vue.js并不包括ajax的通信功能，为了解决这个问题，作者开发了vue-resource（但是这个已经停止维护了），并且也不建议使用jquery.ajax，原因是jquery的思想会导致过多dom操作（太频繁），所以现在推荐使用Axios。
例子：
准备好一个数据源：data.json
{
"name": "蔡虚鲲",
"age": "18",
"sex": "男",
"url":"https://www.baidu.com",
"address": {
"street": "罗德岛大街",
"city": "北京",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
{
"name": "cqh video",
"url": "https://www.4399.com"
}
]
}
html页面
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--在线CDN-->
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>{{info.name}}</div>
<a v-bind:href="info.url">点我一下又不会死</a>
</div>
<script>
var vm = new Vue({
el: "#app",
//data()和data: 不同
data() {
return {
info: {
name:null,
url:null, //设置初始值
},
}
},
mounted() {
//钩子函数 （链式编程） ES6的新特性
axios.get("data.json").then(response => (this.info=response.data)
);//get()内如果数据源不在当前路径下，要加上路径或者../xx
}
});
</script>
</body>
</html>
目前来看，axios读取json数据并利用vm绑定显示，不需要操作dom节点。
计算属性
computed
computed是VUE的一个属性，和data，methods这些是同级别。
形式上和method的格式类似，但是在标签（也可以说是dom节点）中调用的时候不需要加括号，例如< p> {{currentTime}}</ p>,（这里因为格式我故意打了空格）
计算属性的作用就是将不经常变化的计算结果进行缓存，节省浏览器的资源开销。
也就是说，computed修饰的属性时不会主动刷新，除非message数据更新，才会发生变化。
slot（插槽） 重要
为什么要用插槽：
当我在view上想把数据显示出来，一般是放在开始标签与结束标签之间，对吧，比如：
<h 1>我是h1</h 1>，当然我们也可以把文字显示在文本框和按钮等组件上，但这不太符合我们的设计规范，所以我们可以借助VUE的slot实现这个规范。
demo1：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽初长成</title>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</todo>
</div>
<div id="app1"> <!--不使用插槽的测试 -->
<ul>
<li>说话不讲究的猫</li>
<li>印花布</li>
<li>很嗲的黑猫</li>
</ul>
</div>
<script>
//slot 插槽 这个组件要定义在前面不然出不来数据
Vue.component("todo", { //此处定义了两个插槽，用来插入<ul>
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>' //用了斜杠 / 可以起到换行效果，而不用'<div>'+ '<h1>'这样打上单引号和加号
});
Vue.component("todo-title", {
//属性
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
props: ['item'],
template: '<li>{{item}}</li>'
});
let vm = new Vue({
el: "#app",
data: {
//标题
title: "感动猫系列",
//列表
todoItems: ['说话不讲究的猫', '印花布', '防波堤猫', '很嗲的黑猫']
}
});
var vm2 = new Vue({//不使用插槽的测试
el:"#app2"
});
</script>
</body>
</html>
另外v-bind:xxx="...."可以缩写为:xxx="...."
v-on是事件绑定，v-on:click可以简写为@click
感觉缩写辨识度不高，不容易排错，不建议使用/doge
自定义事件内容分发
组件里如何调用VUE 中的方法呢，组件的方法如何操作VUE中的data数据？
需要用到自定义事件，使用this.$emit('自定义事件名',参数)
另外emit的自定义事件名最好用a-b命名方式，而非驼峰式；v-on也不要出现大写符号；
view视图内某视图组件 通过v-on将按钮和组件内的remove方法绑定，然后通过emit设置自定义事件名为remove-test，通过这个事件名调用 VUE实例内的removeItem方法，此方法内将实现删除操作。
demo1：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app"><!--View -->
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items"
v-for="(item,i) in todoItems"
v-bind:item="item" v-bind:index="i"
v-on:remove-test="removeItem(i)">
</todo-items>
</todo>
</div>
<script>
//slot 插槽 这个组件要定义在前面不然出不来数据
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>'
});
Vue.component("todo-title", {
//属性
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
props: ['item', 'index'],
template: '<li>{{index}}-{{item}}<button style="margin: 5px" @click="remove">删除</button></li>',
methods: {
remove: function (index) {
// this.$emit('事件',参数) 自定义事件分发（远程调用方法）
this.$emit('remove-test', index)
}
},
});
let vm = new Vue({
el: "#app",
data: {
//标题
title: "感动猫系列",
//列表
todoItems: ['说话不讲究的猫', '印花布', '防波堤猫', '很嗲的黑猫']
},
methods: {
removeItem: function (index) {
// 一次删除一个元素
this.todoItems.splice(index, 1) //splice是用于 删除/替换/添加 数组内某个元素的，1表示删除当前下标的
console.log("删除了" + this.todoItems[index] + "OK")
}
},
});
</script>
</body>
</html>
实际vue开发不会这样一个个操作标签，会利用vue-cli脚手架进行操作。
VUE-cli 学习（重要）
需要安装node.js
win64位地址如下：
https://cdn.npm.taobao.org/dist/node/v16.3.0/node-v16.3.0-x64.msi
基本一路next即可，node会自行配置环境变量
安装后可以利用node -v和npm -v查看版本号，确认是否安装成功。
npm是node.js下的包管理器
下一步呢，为了提高npm的下载速度，我们需要安装淘宝镜像加速器(cnpm)
npm install cnpm -g# -g为全局安装，这样全局都可以使用
或者
npm install --registry=https://registry.npm.taobao.org
安装完毕后，开始安装vue-cli
使用命令：cnpm install vue-cli -g
查看是否安装成功：vue list
值得一提的是webpack模板，这是为了给ES5浏览器应用上ES6代码规范的一种兼容手段，（降版本），本质上是一种打包模拟器
确定一个路径作为项目路径，比如e:vue-demo
进入文件夹下，指令新建基于webpack模板的VUE项目：
进入项目目录： （在某指定目录下在地址栏中输入cmd也可以进入所在位置，不需要cd指令层层递进）
cd myvue
安装此vue项目所需要的依赖环境
npm install
可以用idea直接打开此项目；
直接运行项目：npm run dev
停止项目：ctrl+c
关于webpack
就目前而言，webpack 是一种模块加载器兼打包工具，把ES6规范的代码资源打包编译成ES5规范的资源（当前浏览器大多不支持ES6，所以需要ES5）
安装 webpack
npm install webpack -g
npm install webpack-cli -g
以一个空项目为例，我们在自建路径modules下新建hello.js
//modules是我自定义的模块路径， 用来梳理exports和require等流程，我以hello.js为暴露接口，main.js作为js主入口 exports.sayHi = function () { document.write("<h1>hello world</h1>") } exports.sayHi2 = function () { document.write("<h1>hello world</h1>") } //exports暴露一个方法：saiHi，然后在入口main.js中接收对象并命名为hello，通过对象 hello调用satHi方法：hello.sayHi //值得一提的是，在一个js中可以暴露很多方法，但是main.js中接收的对象只有一个即可调用，感觉类似后端思想，一个类对象可以调用其中的很多方法。
然后再新建一个main.js作为主入口
let hello=require("./hello");
hello.sayHi()
下一步，在主目录下新建一个webpack.config.js作为打包配置
//需要通过module将js文件打包导出运行 module.exports = { entry: './modules/main.js', //入口，请求暴露的js output: { filename: "./js/bundle.js" } };
然后在idea控制台输入webpack即可打包，打包生成位置如代码所示，在js路径下；
最后主目录新建一个test.html作为配置载体，用来输出显示
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/bundle.js"></script> </head> <body> </body> </html>
html页面运行如图所示： 
总的来说，webpack的思想就是： 前端专攻JS模块即可，js文件写好然后打包，在配置html中引入打出的包
关于vue-router
它是vue官方的路由组件，可以搞定vue框架内单页面应用的跳转问题；
npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。npm install vue-router --save-dev
层次图如下：
VUE结构下的项目组件化特征很明显，view网页可以被分为好几个部分，就像一个个拼好的大零件组成一个完整的擎天柱，而不是一个个小零件同时拼凑，组件化后的view层次会更分明。
运行后如图：
相关代码如下：
index.html，view视图页面，放在根目录即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </head> <body> <div id="app"> </div> </body> </html>
src下新建main.js，包含VUE实例以及路由引用
import Vue from 'vue' import App from './App' import router from "./router";//导入路由配置的目录 Vue.config.productionTip = false new Vue({ el: '#app', //添加路由引用 router, components: {App}, template: '<App/>' })
src下新建一个router路径作为路由配置的存储位置，router下新建index.js作为其配置文件：
/** * vue router的配置 */ //导入vue和vu-router import Vue from 'vue' import VueRouter from 'vue-router'; //导入组件 import Content from "../components/Content"; import Main from "../components/Main"; import Test from "../components/Test"; //导入vue.router组件，安装路由 Vue.use(VueRouter) //配置导出路由 export default new VueRouter({ routes: [ //Content组件 { // 路由的路径 path: '/content', name: 'content', // 跳转的组件 component: Content }, //Main组件 { // 路由的路径 path: '/main', name: 'main', // 跳转的组件 component: Main }, //Test组件 { // 路由的路径 path: '/test', name: 'test', // 跳转的组件 component: Test } ] });
src下components新建几个vue文件，Content.vue，Main.vue，Test.vue
只是作为测试文件，三个都差不多，只是文本内容有一些区别，以Content.vue为例：
<template> <div><h1>首页-感动猫动画</h1> </div> </template> <script> export default { name: "Main" } </script> <!--scoped ：style作用域，不添加则默认全局有效--> <style scoped> </style>
然后我们对默认的App.vue也做一些更改：
<template>
<div id="app">
<h1>说话不讲究的猫</h1>
<!--to就是href属性,对应router里的path-->
<router-link to="/main">首页-感动猫</router-link>
<router-link to="/content">内容页-今日生草标题</router-link>
<router-link to="/test">测试页-机翻测试</router-link>
<!--这个标签就是用来展示视图-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
然后通过下方控制台输入 npm run dev运行，运行图请上翻。
npm run dev 后我们可以看到一种热部署效果。
PS：热部署：代码变化后无需刷新页面即可变更显示，类似ajax的效果
elementUI与Vue应用demo
第一步：进入相关demo路径，创建新工程：
vue init webpack myvue02
如图：
选no是为了加强印象，省事可选Yes；
第二步：进入工程目录并安装各个需要的组件：
# cd myvue02
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
运行时发现报错：
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
node:internal/modules/cjs/loader:944
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- E:\vue-demo\myvue02\node_modules\webpack-dev-server\bin\webpack-dev-server.js
如图：
看报错信息，好像是webpack4后分出来一个包，叫webpack-cli，
npm install webpack-cli -g #安装webpack-cli
安装后发现版本号是4.7.2，记录一下，
然后继续npm run dev ，还是一样的错，上网搜了搜，差不多确定是版本兼容问题........
审视一下，现在我的各个包版本：
node:16.3.0
"vue": "^2.5.2"
"webpack": "^5.38.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-dev-server": "^3.5.1",
然后我卸掉原来的webpack-dev-server按了如下版本
npm install webpack-dev-server@3.11.2 -g
但是并不能运行，最后我干脆新建了个项目，按流程执行，居然就行了= 。=
不说了，日常恍惚操作，上面的流程如下：先vue init webpack myvue03 新建项目myvue03
新建项目：
然后安装elementui，npm i element-ui -S
以及npm install;
安装sass加载器 npm install sass-loader node-sass --save-dev
运行 rnpm run dev
（所以说前端技术版本更新太快，恍恍惚惚的坑也就变多了）
初始化测试完毕，可以关掉命令行窗口了，打开idea
然后需要新建一些路径，懒得打字了，需要编辑的代码位置如图所示：
index.js
//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//登录页
path: '/main',
component: Main
},
//首页
{
path: '/login',
component: Login
},
]
})
main.js
import Vue from 'vue' import App from './App' import VueRouter from "vue-router"; //扫描路由配置 import router from "./router" //导入elementUI import ElementUI from "element-ui" //导入element css import 'element-ui/lib/theme-chalk/index.css' //使用 Vue.use(VueRouter) Vue.use(ElementUI) Vue.config.productionTip = false new Vue({ el: '#app', router, render: h => h(App),//ElementUI规定这样使用 })
App.vue
<template>
<div id="app">
<!--展示视图-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
login.vue
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
username: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
dialogVisible: false
}
},
methods: {
onSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
main.vue
<template>
<el-select v-model="value" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
name: "main",
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
其余默认即可。
一些指令：也许有人会用上
npm uninstall webpack-dev-server -g 卸载全局
npm uninstall webpack-dev-server -D 卸载局部(本地)
安装指定版本（全局或局部安装）： webpack-dev-server@x.x.x -g
https://blog.csdn.net/sd19871122/article/details/108743334
如何更改npm版本：
npm -v 查看版本号
npm install -g npm@xx.xx.xx（据说直接安装就可以，但是我jo的还是先卸载旧的比较好....sudo npm uninstall npm -g，如果提示sudo不存在那就去掉sudo）
nmp历代版本查看，链接如下：
https://www.npmjs.com/package/npm?activeTab=versions
下一章，路由嵌套
路由嵌套
路由嵌套相当于有多个子路由相互嵌套，页面中有一些视图位置是固定的，但也有一些内容位置，要根据我们的选择来显示，所以我们可以通过路由嵌套然后点击不同选项出现不同显示。比如侧边栏通过路由嵌套并跳转，可以在中央view部分作出不同的显示。
通过router-link在视图中渲染对应的模板，路由嵌套本质还是路由router，通过路径渲染对应组件
views下新建路径user：
然后需要两个测试用vue：
Profiles.vue
<template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style scoped> </style>
List.vue
<template> <h1>用户列表</h1> </template> <script> export default { name: "UserList" } </script> <style scoped> </style>
main.vue
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!--插入的地方-->
<router-link to="/user/Profiles">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/List">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
index.js
//导入vue import Vue from 'vue'; import VueRouter from 'vue-router'; //导入组件 import Main from "../views/main"; import Login from "../views/login"; //导入子模块 import UserList from "../views/user/List"; import UserProfile from "../views/user/Profiles"; //使用 Vue.use(VueRouter); //导出 export default new VueRouter({ routes: [ { //登录页 path: '/main', component: Main, // 写入子模块 children: [ { path: '/user/Profiles', component: UserProfile, }, { path: '/user/List', component: UserList, }, ] }, //首页 { path: '/login', component: Login }, ] })
