nodejs vue-element-admin (实训1)
1.安装 nodejs
2.安装 git
3.下载 vue-element-admin
建议
本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
- 集成方案: vue-element-admin
- 基础模板: vue-admin-template
- 桌面终端:electron-vue-admin
- Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
- Others: awesome-project
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
# install dependency
npm install
# develop
npm run dev
- 删除多余界面 router/index
删除后的界面如下
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: {
title: 'Dashboard', icon: 'dashboard' }
}]
},
// 404 page must be placed at the end !!!
{
path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({
y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
4.安装ES6语法插件
npm install --save es6-promise
5.改写文件
本人使用了指导老师写的Axios 插件
import Vue from 'vue';
import Axios from 'axios';
import {
Promise} from 'es6-promise';
import {
MessageBox, Message} from 'element-ui'
Axios.defaults.timeout = 30000; // 1分钟
Axios.defaults.baseURL = '';
Axios.interceptors.request.use(function (config) {
// Do something before request is sent
//change method for get
/*if(process.env.NODE_ENV == 'development'){
config['method'] = 'GET';
console.log(config)
}*/
if (config['MSG']) {
// Vue.prototype.$showLoading(config['MSG']);
} else {
// Vue.prototype.$showLoading();
}
// if(user.state.token){//用户登录时每次请求将token放入请求头中
// config.headers["token"] = user.state.token;
// }
if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {
//默认发application/json请求,如果application/x-www-form-urlencoded;需要使用transformRequest对参数进行处理
/*config['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';*/
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
config['transformRequest'] = function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&")
};
}
//config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
return config;
}, function (error) {
// Do something with request error
// Vue.$vux.loading.hide()
return</