ubase-vue v2.3.12
使用方式
$ vue init litor/ubase2-template project1
$ cd project1
$ npm install --registry=https://registry.npm.taobao.org
$ npm run dev
$ browser http://localhost:port // port在启动的输出日志中可以看到
注意: 使用上面方式生成的代码中包含框架提供的以下功能的使用方式:
- vuex的使用
- 国际化的使用
- 独立请求的config使用
- 静态资源asset的使用
- 内置service的使用
- proxy的使用
根据自己需要删除不需要的部分
编译环境配置
gulpfile.babel.js配置参数说明
import path from 'path'
import ubase from 'ubase-vue'
ubase({
// 输出路径 相对于项目根目录
dist:'./www/',
// 别名 项目可以使用import('statics/...') 方便多级目录下的import
alias: {
'components': path.resolve(__dirname, './src/components'),
'statics': path.resolve(__dirname, './src/statics')
},
// 端口 可以不指定;不指定时,将会随机分配一个可用端口
'port':8081,
// 配置请求代理, target和marathonID二选一, 推荐配置marathonID;配置marathonID后,每次重启工程会到marathon获取最新到ip和端口
'proxy': [{ source: '/api/admin', target: 'http://172.16.6.150:8888', marathonID: 'wec-counselor-leave-apps-v0.0.98' }],
// 是否自动加载vue组件(应用目录及components目录),默认为true
'autoImportVueComponent':true
})
package.json实例
{
"name": "ubase-vue-example",
"version": "0.0.1",
"scripts": {
"dev": "gulp --debug",
"build": "gulp -p"
},
"babel":{
"presets": ["es2015","stage-2"],
"plugins": ["transform-vue-jsx","syntax-async-functions",
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]]
},
"dependencies": {
"ubase-vue": "^2.3.8"
}
}
应用入口
src/index.vue和src/routes.js二选一(简单无需路由的应用的可以用src/index.vue作为入口,对于复杂的多路由应用使用routes.js作为入口)
routes.js 模版
import home from './home.vue'
export default [
{
path: '/',
component: home
}
]
应用目录结构
src/
├── components/
├── index.html
├── routes.js
├── config.json
├── service.js
└── ...
└── statics/
├── images/
├── asset/
└── ...
asset静态资源
src/statics/asset目前下内容会完全拷贝到输出路径下的statics/asset里面,适用与部分不方便import的第三方库,如富文本等;(通过这种方式使用的库,需要在index.html中通过script标签引用)
vuex使用
在应用下新建后缀为".vuex.js"的文件,ubase-vue会自动识别并做vuex的相关配置(这些配置是在底层实现的,不掺合开发者的业务代码,并对开发者不可见)。
在vue中如何使用?
export const state = {
name: 'wisedu'
}
computed: {
index(){
return this.$state.index // index即为index.vuex.js的内容
},
}
mounted(){
console.log(this.index.name) // 输出wisedu
}
单工程多APP使用
在src目录下新建apps目录,在apps目录下面可以新建多个app目录,app之间相互独立,各自都有自己单独的index.html入口。
src/
├── components/
├── apps/
│ ├── app1
│ │ ├── index.html
│ │ ├── routes.js
│ │ ├── config.json
│ │ └── ...
│ ├── app2
│ │ ├── index.html
│ │ ├── routes.js
│ │ ├── config.json
│ │ └── ...
│ └── ...
└── statics/
├── images/
└── ...
单独请求的配置文件
在应用index.html同级目录下,新建config.json文件即可。该文件不会被编译到项目代码中,浏览器访问应用时,会单独请求该文件。方便打包完成后依然需要修改配置的情况。
在vue中如何使用config.json中的配置?
在vue中通过this.$root.config即可访问到config.json中到内容。
国际化使用
在应用下新建后缀为".i18n.js"的文件,ubase-vue会自动识别并做国际化的相关配置
Sample index.i18n.js
var zh_CN = {
title: 'demo title',
};
var en_US = {
title: 'demo title2',
};
export default { zh_CN , en_US};
在vue文件template中的使用方式:
<div>{{$t('index.title')}}</div>
在vue文件script中的使用方式:
this.$t('index.title')
注:当app有多个语言时,在config.json中有一项特殊的配置项"LANG", 可以配置当前需要使用的语言
自动导入app下的vue文件(应用下自己写的vue文件可以在template里直接使用,无需再import)
app下vue自动导入并全局注册(此时需要保证单个app下vue的文件名不能重名),多app模式下,app之间时相互独立的(app之间vue文件可以同名)。 注:自动导入默认开启,如需关闭可在gulpfile.babel.js中配置autoImportVueComponent为false
代理配置
在gulpfile.babel.js中配置proxy项即可
'proxy': [{ source: '/api/', target: 'http://172.16.6.150:8888' }] // 其中/api为需要代理的接口前缀,target是需要代理到的真实服务地址
可用端口自动识别
前端工程启动时,自动识别可用端口,无需指定(多工程开发时如果手动指定容易冲突)
开发接口
window.Ubase.beforeInit
在整个应用挂载开始之前被调用
参数
{
config // config.json中的对象
router // routes.js的内容
next // 函数 继续往下执行
}
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago