vue-admin-element https://panjiachen.github.io/vue-element-admin-site/zh/

基于vue的生态做的很好，提供的很多的文档，中文。并且有视频。

vue

element == element ui

vue-cli实现（脚手架）

内置了 i18 国际化解决方案 提供了中文

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

进入项目目录

cd vue-element-admin

安装依赖

npm install # FQ安装 npm == linux 中 yum 包管理工具 npm时候node的包管理工具

node_modules

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

需要启动mock服务

运行 mock

python mock.py

本地开发 启动项目

npm run dev # 项目的根目录

├── src # 源代码
│ ├── api # 所有请求 *
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件 *
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由 *
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 *
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理

parameter.html 迁移到 vue-admin框架

parameter.html 就是基于elementui实现的 vue-element-admin 框架也是基于 vue和element-ui实现的

前端 3 大块

js、css、html

导入模块，导出模块：

第一种
export { parameterRouter } // 导出模块
import { parameterRouter } from './modules/parameter'

第二种
export default { // 只能导出一个
name: 'parameter'
}
import chartsRouter from './modules/charts' // 不带大括号的都是 和 export default结合使用的

代码爆红：

代码爆红是由于框架增加了代码格式验证

需要修改根目录下 .eslintrc.js 中rules改为 rules:{}

4.1 配置路由

例：src/router/parameter.js

import Layout from '@/layout' //导入一个模块，菜单模块
const parameterRouter = { //定义一个常量
path: '/main', //路径
component: Layout,
redirect: 'noRedirect', //重定向
meta: {
icon: 'lock',
roles: ['qa'] // 权限
},
children: [
{
path: 'parameter',
component: () => import('@/views/parameter/index'),
name: '参数管理',
meta: { title: '参数管理', icon: 'table' }
}
]
}

export { parameterRouter } //导出模块，当你想要外部应用你的模块，要用export，多个变量用，隔开 export{a,b}

4.2 在src/router/index.js中导入模块

/* Router Modules */
import componentsRouter from './modules/components'
import chartsRouter from './modules/charts'
import tableRouter from './modules/table'
import nestedRouter from './modules/nested'
import { parameterRouter } from './modules/parameter'

export const asyncRoutes = [
parameterRouter,
{
path: '/permission',
component: Layout,
redirect: '/permission/page',
alwaysShow: true, // will always show the root menu
name: 'Permission',
meta: {
title: 'permission',
icon: 'lock',
roles: ['qa', 'editor'] // you can set roles in root nav
}
]

asyncRoutes:受权限控制的模块

constantRoutes：全部模块，不受权限控制

导入成功后，在左侧菜单栏处，能看到新增页面

4.3 在Views目录创建 对应业务的文件夹，文件夹下有默认的一个index.vue  parameter.html

例：src/views/parameter目下有个index.vue

4.4 创建API，和后台请求的接口，每开发一个模块，需要在src/api目录下创建一个针对这个模块的API接口

例：src/api/parameter.js

import request from '@/utils/request' //@代表src目录

//获取参数信息
export function getParameter(params) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'get',
params:params
})
}

//删除参数信息
export function deleteParameter(params) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'delete',
params:params
})
}

export function putParameter(data) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'put',
data:data
})
}

export function postParameter(data) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'post',
data:data
})
}

4.5 src/utils/requests.js 实际是对axios进行封装，最后暴露一个模块

import request from '@/utils/request' //@代表src目录

export function getParameter(params) {
return request({
url: 'http://127.0.0.1:8000/api/parameter',
method: 'get',
params:params
})
}

//引用
//getParameter(this.filter_query)相当于axios()
get_page_data: function() {
this.loading = true //
getParameter(this.filter_query).then((response) => {
this.tableData = response.data.data
this.total = response.data.count
this.loading = false //
})
},

4、pycharm安装vue插件

File--Settings--Plugins

搜索vue，选择第一个vue.js，Install

安装成功后，重启pycharm