zhangyu a54984ea6b 创建现场验证任务添加极简方案(页面写死静态数据) | 5 سال پیش | |
---|---|---|
build | 5 سال پیش | |
config | 5 سال پیش | |
src | 5 سال پیش | |
static | 5 سال پیش | |
.babelrc | 5 سال پیش | |
.editorconfig | 5 سال پیش | |
.gitignore | 5 سال پیش | |
.postcssrc.js | 5 سال پیش | |
README.md | 5 سال پیش | |
index.html | 5 سال پیش | |
package.json | 5 سال پیش | |
publish.js | 5 سال پیش | |
tsconfig.json | 5 سال پیش |
A Vue.js project
npm install
npm install vuex axios element-ui echarts font-awesome
npm install less less-loader node-sass sass-loader --save-dev
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
│ .editorconfig # 格式化配置,修改缩进为2
│ index.html # 修改页面title
│ package.json # 包
│ README.md # 说明文档
│
├─build # 不变
│
├─config
│ dev.env.js # 开发环境变量
│ index.js # 设置代理
│ prod.env.js # 生产环境变量
│
├─src
│ ├─api # 业务逻辑api, http的请求都放在这里
│ │ |─framework.js # 框架预留接口,实现登录,权限校验等功能
│ │ └─httputils.js # http 工具类
│ ├─assets # 静态资源, 替换logo图片
│ ├─components # 业务相关组件
│ ├─data # 业务相关静态数据
│ │ menus.js # 菜单数据
│ ├─demo # Demo主目录
│ │ │ demo-menus.js # Demo按钮
│ │ │ demo-routes.js # Demo路由
│ │ └─views # Demo页面
│ ├─framework # 框架主目录
│ │ ├─components # 业务无关组件
│ │ │
│ │ ├─demo # Demo主目录
│ │ │ │ demo-menus.js # Demo按钮
│ │ │ │ demo-routes.js # Demo路由
│ │ │ └─views # Demo页面
│ │ │
│ │ ├─layout # 框架主目录
│ │ │ layout-store.js # 框架状态定义
│ │ │ Login.vue # 登录页
│ │ │ Main.vue # 框架主页
│ │ │ PageHeader.vue # 顶部栏
│ │ │ PageSidebar.vue # 左侧菜单栏
│ │ │
│ │ ├─plugins # 插件,业务无关
│ │ │ components.js
│ │ ├─style # 样式
│ │ │
│ │ ├─template # 页面模板
│ │ │ TablePageTemplate.vue
│ │ │
│ │ └─utils # 工具类,业务无关
│ │
│ ├─router # 主路由
│ │ index.js
│ │ system.js
│ │
│ ├─store # vuex
│ │ index.js
│ │
│ └─views # 业务页面主路径
|
└─static
.gitkeep
必须实现以下方法
export default {
// 路由拦截
routerBeforeEach: async function(to, from, next){},
// 获取左侧菜单数据
getMenus: function(permissions){},
// 跳转到登录页面
toLoginPage: function(){},
// 登录接口
login: function(username, password){}
// 加载当前登录用户信息
loadUserInfo: function(){},
// 退出登录
toLogout: function(){}
}
/src/utils/basicutils.js
formatDateByPattern(date, pattern) // 日期格式化
indexInArray(arr, key, val) // 找出数组arr中第一个属性key的值等于val的元素的下标
itemInArray(arr, key, val) // 找出数组arr中第一个属性key的值等于val的元素
deleteInArray(arr, key, val) // 从数组中将属性key的值等于val的所有元素删除
/src/api/httputils.js // 一般在服务端接口 API 中使用,不建议在别的地方使用,有授权标记
getCookie(name) // 获取cookie值
getJson(url, params) // 发送GET请求
postJson(url, data) // 发送POST请求
/src/utils/storage.js
set(key, value, fn) // 在浏览器缓存中设置数据, 如果value是对象会转化成json
get(key, fn) // 在浏览器缓存中取出数据, 取出数据后会尝试js对象返回
remove(key) // 在浏览器缓存中删除数据
在路由router中配置meta.breadcrumbs,在进入路由页面时会自动解析为面包屑
this.$store.dispatch('setBreadcrumb', [{ label: 'Demo' }, { label: 'Form' ])
this.$store.dispatch('setBreadcrumb', [{ label: 'Demo', path: '' }, { label: 'Form' , path: ''}])
在组件中引入Bus中央时间总线
Bus.$emit('openUploader', query, file) //添加文件到上传管理器中, query为参数, file为H5原生的文件对象
Bus.$on('fileAdded', () => {}) //文件选择后的回调
Bus.$on('fileSuccess', () => {}) //文件上传成功后的回调