Natural Preference for Minification
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

ubase-vue

2.3.12 • Public • Published

使用方式

$ 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 // 函数 继续往下执行
    }

Keywords

none

install

npm i ubase-vue

Downloadsweekly downloads

64

version

2.3.12

license

ISC

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability