2.3.12 • Published 6 years ago

ubase-vue v2.3.12

Weekly downloads
8
License
ISC
Repository
-
Last release
6 years ago

使用方式

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

6 years ago

2.3.11

6 years ago

2.3.9

6 years ago

2.3.8

6 years ago

2.3.7

6 years ago

2.3.6

6 years ago

2.3.5

6 years ago

2.3.4

6 years ago

2.3.3

7 years ago

2.3.2

7 years ago

2.3.1

7 years ago

2.3.0

7 years ago

2.2.0

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.1.7

7 years ago

2.1.6

7 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.29

7 years ago

2.0.28

7 years ago

2.0.27

7 years ago

1.2.1

7 years ago

2.0.26

7 years ago

2.0.25

7 years ago

2.0.24

7 years ago

2.0.23

7 years ago

2.0.22

7 years ago

1.2.0

7 years ago

1.1.44

7 years ago

1.1.43

7 years ago

1.1.42

7 years ago

1.1.41

7 years ago

1.1.40

7 years ago

1.1.39

7 years ago

2.0.21

7 years ago

1.1.38

7 years ago

1.1.37

7 years ago

1.1.36

7 years ago

2.0.20

7 years ago

1.1.35

7 years ago

2.0.19

7 years ago

2.0.18

7 years ago

2.0.17

7 years ago

1.1.34

7 years ago

2.0.16

8 years ago

2.0.15

8 years ago

1.1.33

8 years ago

2.0.14

8 years ago

2.0.13

8 years ago

2.0.12

8 years ago

1.1.32

8 years ago

1.1.31

8 years ago

1.1.30

8 years ago

1.1.29

8 years ago

1.1.28

8 years ago

1.1.27

8 years ago

1.1.26

8 years ago

1.1.24

8 years ago

1.1.23

8 years ago

1.1.22

8 years ago

1.1.21

8 years ago

1.1.20

8 years ago

2.0.11

8 years ago

2.0.10

8 years ago

2.0.9

8 years ago

2.0.8

8 years ago

2.0.7

8 years ago

2.0.6

8 years ago

2.0.5

8 years ago

2.0.4

8 years ago

2.0.3

8 years ago

2.0.2

8 years ago

2.0.1

8 years ago

1.1.19

8 years ago

1.1.18

8 years ago

1.1.17

8 years ago

1.1.16

8 years ago

1.1.15

8 years ago

1.1.14

8 years ago

1.1.13

8 years ago

1.1.12

8 years ago

1.1.11

8 years ago

1.1.10

8 years ago

1.1.9

8 years ago

1.1.8

8 years ago

1.1.7

8 years ago

1.1.6

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.70

8 years ago

1.0.69

8 years ago

1.0.68

8 years ago

1.0.67

8 years ago

1.0.66

8 years ago

1.0.65

8 years ago

1.0.64

8 years ago

1.0.63

8 years ago

1.0.62

8 years ago

1.0.61

8 years ago

1.0.60

8 years ago

1.0.59

8 years ago

1.0.58

8 years ago

1.0.57

8 years ago

1.0.56

8 years ago

1.0.55

8 years ago

1.0.54

8 years ago

1.0.53

8 years ago

1.0.52

8 years ago

1.0.51

8 years ago

1.0.50

8 years ago

1.0.49

8 years ago

1.0.48

8 years ago

1.0.47

8 years ago

1.0.46

8 years ago

1.0.45

8 years ago

1.0.44

8 years ago

2.0.0

8 years ago

1.0.43

8 years ago

1.0.42

8 years ago

1.0.41

8 years ago

1.0.40

8 years ago

1.0.39

8 years ago

1.0.38

8 years ago

1.0.35

8 years ago

1.0.33

8 years ago

1.0.32

8 years ago

1.0.31

8 years ago

1.0.30

8 years ago

1.0.29

8 years ago

1.0.28

8 years ago

1.0.27

8 years ago

1.0.26

8 years ago

1.0.25

8 years ago

1.0.24

8 years ago

1.0.23

8 years ago

1.0.22

8 years ago

1.0.21

8 years ago

1.0.20

8 years ago

1.0.19

8 years ago

1.0.18

8 years ago

1.0.17

8 years ago

1.0.16

8 years ago

1.0.15

8 years ago

1.0.14

8 years ago

1.0.13

8 years ago

1.0.12

8 years ago

1.0.11

8 years ago

1.0.10

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago