JingTieXueTang.web
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.
项目菜单（由数据库配置）
// 例如
let menus = {
path: '/user', // 路由路径 [若有children，则不需要该字段]
meta: {
title: '用户管理', // 页面标签的标题
icon: 'user', // 菜单图标名称，要在`阿里的iconfont网站建立的库中`能找到
// hidden: false, // 是否隐藏该菜单，不配置则默认显示；为true不显示
// noClose: false, // 是否不可关闭，不配置则默认可关闭（显示“x”）；为true则不可关闭，将一直显示，如首页
// noCache: false // 是否缓存页面，不配置则默认缓存（保留对页面的操作及输入的数据）；为true则不缓存
},
children: [
{
path: '/user/staff', // path要完整的 [若有children，则不需要该字段]
meta: { title: '员工管理' }, // , icon: 'user' 若子菜单需要icon就加上
},
], // 子菜单，结构跟父菜单一样
};
项目共通工具使用说明
1.调用后台接口方法：
- 已在全局注册，无需引入，直接使用即可。
- this.\$_http ==> axios 配置详解
- this.\$_API ==> 接口地址
-----------------------vue实例内部调用后台接口------------------------------
this.$_http.get(url, config)
this.$_http.post(url, config)
this.$_http.put(url, config)
this.$_http.delete(url, config)
this.$_http.request(config)
// 其中 url为接口地址，在api目录下定义
// config内容为参数和其他配置，例如：
--------------------------执行 GET 请求---------------------------------
// 执行 GET 请求
this.$_http.get(this.$_API.INTERFACE_USER_LOGIN + "?ID=12345")
.then(response => {
// 自己的操作
console.log(response);
})
// 不需要写catch，框架会自动提示出来
// 可选地，上面的请求可以这样做
this.$_http.get(this.$_API.INTERFACE_USER_LOGIN, {
params: {
ID: 12345
}
}).then(response => {
// 自己的操作
console.log(response);
})
--------------------------执行 POST 请求---------------------------------
// 执行 POST 请求
this.$_http.post(this.$_API.INTERFACE_USER_LOGIN, {
firstName: "Fred",
lastName: "Flintstone"
}).then(response => {
// 自己的操作
console.log(response);
})
--------------------------执行 DELETE 请求---------------------------------
// 执行 POST 请求
this.$_http.delete(this.$_API.INTERFACE_USER_LOGIN, {
data: { id: 1 }
}).then(response => {
// 自己的操作
console.log(response);
})
--------------------------其他方式调用---------------------------------
Vue.request(config)/get/post/...
windows.request(config)/get/post/...
2.使用共通过滤器
| 过滤方法名 |
功能 |
示例 |
| formatDateTime |
格式化日期+时间 |
date |
| formatDate |
格式化日期 |
date |
| formatMoney |
格式化金额（除以 100 并保留 2 位小数），不带单位 |
money |
| formatMoneyWithSymbol |
格式化金额（除以 100 并保留 2 位小数），不带单位，带符号：￥ |
money |
| formatDuration |
格式化时长 |
durition |
| formatSex |
格式化性别，1：男；2：女 |
sex |
| formatAge |
格式化年龄显示 |
age |
| formatMobileHidden |
电话号码隐藏中间几位 |
|
// js中
import { formatDateTime } from '@/filters/index';
formatDateTime(date);
<!-- html中 -->
<span>date | formatDateTime</span>
|
3.开发时是否使用数据库中的菜单
- 在
@/main.js目录下修改MenusFromDB配置即可，为false则使用@/router/menu.js中的模拟菜单配置。
4.公共样式文件
- 全局样式都在
@/styles/目录下。
frame目录下是框架的样式，除了框架修改一般不建议修改；components目录下的index.less则是开发时各组件使用的共通样式。common目录下的vant.less是用来全局覆盖 antDesign-ui 中的样式，会影响所有对应的 antDesign-ui 组件，慎改。variables.less是定义需要的 css 变量；index.less用来写一些通用的样式。
5.使用变量样式
- 变量样式文件位于
@/styles/common/variable.less
<style>
@import '~@/styles/common/variable.less';
.className {
color: @mainColorBlue;
}
</style>
6.使用图标组件
- 若有新的阿里的
iconfont更新，需要重新获取在线链接，更新@/styles/index.js中的scriptUrl值
- 若是
antDesignUi中的图标，使用
- 若是
阿里的iconfont，使用
- 若需要修改图标颜色，则需要在行内加样式，如
7.使用 vuex
- 两种方式，mapGetters 是直接取 getters.js 中所设置的变量
import { mapState, mapGetters } from 'vuex';
...mapState({
userInfo: state => state.user.userInfo
})
...mapGetters(['routes', 'sidebar']),
