npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
npm run lint
See Configuration Reference.
let menus = {
path: '/user',
meta: {
title: '用户管理',
icon: 'user',
},
children: [
{
path: '/user/staff',
meta: { title: '员工管理' },
},
],
};
- 已在全局注册,无需引入,直接使用即可。
- 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)
--------------------------执行 GET 请求---------------------------------
this.$_http.get(this.$_API.INTERFACE_USER_LOGIN + "?ID=12345")
.then(response => {
console.log(response);
})
this.$_http.get(this.$_API.INTERFACE_USER_LOGIN, {
params: {
ID: 12345
}
}).then(response => {
console.log(response);
})
--------------------------执行 POST 请求---------------------------------
this.$_http.post(this.$_API.INTERFACE_USER_LOGIN, {
firstName: "Fred",
lastName: "Flintstone"
}).then(response => {
console.log(response);
})
--------------------------执行 DELETE 请求---------------------------------
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/...
过滤方法名 |
功能 |
示例 |
formatDateTime |
格式化日期+时间 |
date |
formatDate |
格式化日期 |
date |
formatMoney |
格式化金额(除以 100 并保留 2 位小数),不带单位 |
money |
formatMoneyWithSymbol |
格式化金额(除以 100 并保留 2 位小数),不带单位,带符号:¥ |
money |
formatDuration |
格式化时长 |
durition |
formatSex |
格式化性别,1:男;2:女 |
sex |
formatAge |
格式化年龄显示 |
age |
formatMobileHidden |
电话号码隐藏中间几位 |
|
import { formatDateTime } from '@/filters/index';
formatDateTime(date);
<span>date | formatDateTime</span>
|
- 在
@/main.js
目录下修改MenusFromDB
配置即可,为false
则使用@/router/menu.js
中的模拟菜单配置。
- 全局样式都在
@/styles/
目录下。
frame
目录下是框架的样式,除了框架修改一般不建议修改;
components
目录下的index.less
则是开发时各组件使用的共通样式。
common
目录下的vant.less
是用来全局覆盖 antDesign-ui 中的样式,会影响所有对应的 antDesign-ui 组件,慎改。variables.less
是定义需要的 css 变量;index.less
用来写一些通用的样式。
- 变量样式文件位于
@/styles/common/variable.less
<style>
@import '~@/styles/common/variable.less';
.className {
color: @mainColorBlue;
}
</style>
- 若有新的阿里的
iconfont更新
,需要重新获取在线链接
,更新@/styles/index.js
中的scriptUrl
值
- 若是
antDesignUi中的图标
,使用
- 若是
阿里的iconfont
,使用
- 若需要修改图标颜色,则需要在行内加样式,如
- 两种方式,mapGetters 是直接取 getters.js 中所设置的变量
import { mapState, mapGetters } from 'vuex';
...mapState({
userInfo: state => state.user.userInfo
})
...mapGetters(['routes', 'sidebar']),