ElementUI
1.使用
第一步, 在项目的终端运行下面的命令 安装elementui的js css文件
npm i element-ui -S
第二步, 在 main.js中 引入elementui
//参考官网介绍
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//全局中 使用 elementui
Vue.use(ElementUI);
第三步, 在components文件夹中 创建menus.vue文件
<template>
<div>
<el-col :span="12">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
第四步, 在需要使用菜单组件的目标页面上
1.声子
2.挂子
3.用子
第五步, 使用axios请求后端数据
通过 npm i axios -S 在当前项目下 下载axios依赖的js文件
在页面中 import 引入axios 剩下使用方式和以前一样
第六步, 前端解决跨域(后端就可以不用配置跨域了,方案有点多)
在开发过程中,从 Vue 项目发送请求到目标服务器,会存在跨域问题,因此,我们需要在 vue.config.js 文件中进行配置:
module.exports = {
// 配置开发环境中要访问的服务器地址
devServer: {
proxy: 'http://localhost:8888'
}
}
注意:
vue.config.js 文件需要自己在项目根目录手动创建。
vue.config.js 文件发生改动后,需要重启 Vue 项目。
引入
import axios from 'axios'
发请求
// get
const data = await axios({
url: "/students",
method: "GET",
// GET 请求前端发送给后端的数据
params: {
type: "name",
value: "",
pageSize: 10,
currentPage: 1,
},
});
// POST
const data = await axios({
url: "/students",
method: "POST",
// Post 请求前端发送给后端的数据
data: {
type: "name",
value: "",
pageSize: 10,
currentPage: 1,
},
});
5.main.js中注意,不要加默认的url
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios=axios;
// 设置默认的url会导致跨域 需要在vue.config.js中配置跨域解决方案
// axios.defaults.baseURL="http://localhost:8081"
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
6.提供完整的跨域解决配置:
```js
‘use strict’
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require(‘path’)
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8082', // 你请求的第三方接口
changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写,
'^/api': '/' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
```