为了搞定毕设的页面,最近学习了一个纯Vue的后台管理系统,懂了,又没懂,只是会用用。
下面记录一下一些用法,虽然不大懂原理。。。。
安装
我的电脑里面已经装好了node那些环境了,直接用起来就行。
首先要创建项目
vue create project-name
然后进去目录,
npm install
npm run serve
跑起来,就能看到东西了。
然后需要什么就npm install XXX,直接导入就行了。
比如,我会使用到elemenet-ui进行开发,就进入它的官网,然后找到npm安装就行了。
npm i element-ui -S
路由、axios等同理。
页面
主要页面如下(看注释)
views/Main.vue
<template>
<!--如el-xx的,都是element-ui的组件-->
<el-container style="height: 100%">
<el-aside width="auto">
<!-- 引入的模块的组件,这相当于CommonAside里面的所有东西,只是被这个标签替代了 -->
<!--另外,需要小写,大写用-间隔-->
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header>
<common-header></common-header>
</el-header>
<common-tag></common-tag>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
// 引入的组件。引入了就要用
import CommonAside from "../src/components/CommonAside";
import CommonHeader from "../src/components/CommonHeader";
import CommonTag from "../src/components/CommonTag";
// 导出,不导出的话不能像上面那样被别人引入
export default {
// 组件名,就是你以后导出的名字
name: 'Home',
// 使用的组件
components:{
CommonAside,
CommonHeader,
CommonTag
},
// 数据
data() {
return {}
},
//方法
method:{
},
// 创建时,自动调用
created() {
this.getList()
}
}
</script>
<style lang="less">
.el-header{
background-color: #333;
}
.el-main{
padding-top: 0;
}
</style>
路由
需要安装router
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main'
// 使用路由
Vue.use(VueRouter)
//创建路由
const router = new VueRouter({
mode: "history",
// 具体的路由项,是固定写法
routes: [
{
path: '/',
name: 'Main',
component: Main,
children: [
// 子路由,在这个页面进行跳转的
{
path: '/home',
name: 'home',
component: () => import('../views/home')
}, {
path: '/user',
name: 'user',
component: () => import('../views/user')
}, {
path: '/mall',
name: 'mall',
component: () => import('../views/mall')
}, {
path: '/page1',
name: 'page1',
component: () => import('../views/other/pageOne')
}, {
path: '/page2',
name: 'page2',
component: () => import('../views/other/pageTwo')
}
]
},
{
path: '/login',
name: 'login',
component:()=>import('../views/login/login')
}
]
})
// 导出路由
export default router
可以结合src/App.vue
一起看看
<template>
<div id="app">
// 路由页面,既当前是在哪个路径的,就展示怎样的组件
// 可以看到,现在是在/,要展示Main的
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
html,body{
margin: 0;
padding: 0;
}
#app{
height: 100vh;
}
</style>
还有一个叫做路由守卫的使用
router.beforeEach((to, from, next) => {
store.commit('getToken')
const token = store.state.user.token
// 没有token,直接回去login页
if (!token && to.name !== 'login') {
next({name: 'login'})
}else{
next()
}
})
axios
路由跳转,可以直接用。
好像是什么很高级的用法(ES6?)是一个class
import axios from "axios";
import config from '../config/index'
const baseUrl = process.env.NODE_ENV === 'development' ?
config.baseUrl.dev : config.baseUrl.pro;
class HttpRequest {
// 构造函数
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
getInsideConfig() {
const config = {
baseUrl: this.baseUrl,
header: {}
}
return config
}
interceptor(instance) {
// 发送请求前要做什么
instance.interceptors.request.use(function (config) {
return config
}, function (error) {
return Promise.reject(error)
});
// 对响应数据做点什么
instance.interceptors.response.use(function (response) {
console.log(response, 'response')
return response
}, function (error) {
console.log(error, 'error')
return Promise.reject(error)
});
}
// 以后就用这个封装好的
request(options) {
const instance = axios.create()
options = { ...this.getInsideConfig(), ...options}
this.interceptor(instance)
return instance(options)
}
}
export default new HttpRequest(baseUrl)
封装好之后怎么用?
export const getMenu = (param) => {
return axios.request({
url: '/permission/getMenu',
method: 'post',
data: param
})
}
vuex
需要安装
具体可查官网使用,我这里只当它是个存储的,跨组件的存储
index.js
import Vue from "vue";
import Vuex from 'vuex'
import tab from './tab'
import user from './user'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
// 有多少个就引多少个
tab, user
}
})
tab.js
export default {
// 存的数据
state: {
isCollapse: false,
// 存放面包屑的元素,默认有个首页
tabsList: [
{
path: '/home',
name: 'home',
label: '首页',
icon: 'home'
}
],
// 当前选中的菜单
currentMenu: null
},
// 使用的方法
mutations: {
collapseMenu(state) {
state.isCollapse = !state.isCollapse;
},
selectMenu(state, val) {
if (val.name !== 'home') {
// 不是首页
state.currentMenu = val;
const result = state.tabsList.findIndex(item => item.name === val.name)
if (result === -1) {
state.tabsList.push(val);
}
} else {
// 重置标识
state.currentMenu = null;
}
},
closeTag(state, val) {
const result = state.tabsList.findIndex(item => item.name === val.name)
state.tabsList.splice(result, 1)
}
}
}
怎么调用方法?
methods: {
handleMenu() {
// commit即可,需要参数可跟在后面
this.$store.commit('collapseMenu')
}
}
如何获取state里面的数据?
import {mapState} from 'vuex'
// 使用计算属性
computed: {
...mapState({
tags: state => state.tab.tabsList
})
}
// 或者
// this.$store.state.xxx.属性
computed: {
isCollapsed() {
return this.$store.state.tab.isCollapse;
}
}
数据绑定
我突然发现一个非常震惊的东西,就是使用了vue,除了正常写页面外,如果需要让它展示某些数据,只要**{}或者用冒号:进行绑定,要使用方法的话,一般用@绑定事件,比如@click="xxx"**
所以,之后使用的话,只要写写样式,然后在需要数据的地方定义一下,然后让它与定义的data进行绑定,而数据就是通过axios请求后台获取,然后赋值到data上。如果需要跨组件请求的数据,或者需要暂时存一下的数据,可以存到localStorage或者使用vuex。
大致是这样吧,以后如果再有机会学习学习前端的知识,肯定不会总结得这么草。