1.0.17 • Published 6 years ago

vstarter v1.0.17

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

VStarter npm package

适用于vue2, 基于vue-entry的前端快速开发框架, 让您更专注于业务代码。demo工程

使用方式

$ vue init litjs/vstarter-template project1
$ cd project1
$ npm install
$ npm run dev
$ browser http://localhost:8082

编译环境配置

gulpfile.babel.js配置参数说明

{
    // 输出路径 相对于项目根目录
    dist:'./www/', 

    // 别名 项目可以使用import('statics/...') 方便多级目录下的import
    alias: {  
        'components': path.resolve(__dirname, './src/components'),
        'statics': path.resolve(__dirname, './src/statics')
    },
    
    // 端口 可以不指定;不指定时,将会随机分配一个可用端口
    'port':8081, 
    
    // 设置的变量在项目代码可以通过 process.env.a 使用,
    'process.env':{a: 1},  
    
    // 配置请求代理
    'proxy': [{ source: '/api/admin', target: 'http://172.16.6.150:8888' }],
    
    // 移动端使用 值为设计稿像素宽度 设置该参数后 项目中的px会编译成rem
    'rootFontSize': 375,
    
    // 是否自动加载vue组件(应用目录及components目录)
    'autoImportVueComponent':true
}

vuex使用

在应用下新建后缀为".vuex.js"的文件,vstarter会自动识别并做vuex的相关配置(这些配置是在底层实现的,不掺合开发者对业务代码,并对开发者不可见)。

在vue中如何使用?

computed: {
    ...Vuex.mapState({
      index: state => state.index
    }),
  }

注:此处"..."为解构赋值语法, 用上面vstarter-template生成的项目可以直接使用。

单工程多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"的文件,vstarter会自动识别并做国际化的相关配置

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.VStarter.beforeInit

在整个应用挂载开始之前被调用

参数

    {
        config // config.json中的对象
        router // routes.js的内容
        next // 函数 继续往下执行
    }

LICENSE

MIT