vue2do

0.4.28 • Public • Published

vue2do - 基于 vue2 的响应式基础组件

Coverage Status Build Status

vue2do

访问 zen0822.github.io 开始使用 vue2do


开始使用

安装

(真心推荐 yarn,npm 经常丢包,要不就用 cnpm)

npm i vue2do -S

全部加载

import Vue from 'vue'
import vue2do from 'vue2do'
 
Vue.use(vue2do)

在项目中使用

<z-input></z-input>

局部加载

import {
  select,
  input
  // ...
} from 'vue2do'
 
Vue.component('select', select)
Vue.component('yourPrefix' + input.compName, input)

加载指定组件

因为从 vue2do/index.js 文件加载的时候会加载所有的组件,所以只加载指定组件就可以只打包这个组件的文件

import Input from 'vue2do/component/Input'
 
Vue.component('Input', Input)

通过 script 标签加载使用

从 codepen 预览

...
  <body>
    <div id='app'></div>
    <script src="https://unpkg.com/babel-polyfill@^6.26.0/dist/polyfill.min.js"></script> 
    <script src="https://unpkg.com/vue@^2.5.13/dist/vue.min.js"></script> 
    <script src="https://unpkg.com/vuex@^3.0.1/dist/vuex.min.js"></script> 
    <script src="https://unpkg.com/vue-i18n@^7.3.3/dist/vue-i18n.min.js"></script> 
    <script src="https://unpkg.com/vue2do@^0.3.6/dist/vue2do.min.js"></script> 
    <script>
      // 注册 vue2do 实现全局加载,就可以直接调用 z-input 之类的组件
      Vue.use(Vue2do)
 
      new Vue({
        data(){
          return {
            initOpt: [{
              value: 1,
              text: '1'
            }]
          }
        },
        template: '\
          <div>\
            <input-box></input-box>\
          </div>',
        components: {
          'input-box': Vue2do.Input
        }
      }).$mount('#app')
    </script> 
  </body>
...

构建单页应用(spa)和多页应用(mpa)

全局安装 vue2do

npm i vue2do -g

命令行

初始化应用项目

  • projectName: 项目名字
vue2do init project [projectName]

构建应用

  • appType: 应用类型,可选 spa 和 mpa
  • appName: 应用名字
cd [projectName] // 初始化的项目应用目录下
vue2do build <appType> [appName]

例子

在当前目录构建名字为 zenProject 的应用项目

vue2do init project zenProject

在当前应用项目构建 名字为 zenMpa 的多页应用

cd zenProject
vue2do build mpa zenMpa

.apprc配置解析

  • api:dev 环境的 api 的访问域名
  • apiProd 环境的 api 的访问域名
  • assetRoot:以 .apprc 将文件打包的文件位置,位置相对的文件位置
  • assetPublicPath:打包资源的时候添加在前面的公共访问地址
  • assetSubDirectory:静态资源存放在 assetRoot 的文件夹位置
  • hotPort:dev 环境的访问端口,https 的默认访问端口是 443,http 是 80
  • htmlName:打包生成的 index.html 访问地址 记得加上 html 的文件名,不然 404
  • https:等同于 webpack 的 https 选项配置
  • loaderRule:loader rule
  • mockPort:mock 环境的访问端口,默认是 3000
  • proxy: webpack 的 dev 服务器的代理配置
  • tpl:使用 app 源文件下的 index.html 的模板 html 文件
  • type:app 的类型,spa 单页,mpa 多页

获取更多信息请访问 vue2do 的 文档网站

本项目遵循 semver 版本管理

希望十年之后看到我的代码还是像现在一样佩服自己。

Package Sidebar

Install

npm i vue2do

Weekly Downloads

6

Version

0.4.28

License

MIT

Unpacked Size

2.12 MB

Total Files

363

Last publish

Collaborators

  • vue2do