Vue2do NPM | npm.io

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

访问 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 版本管理

vue2 component ui typescript

@babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @types/aws-lambda @types/jest @types/mocha @types/pug @types/webpack @vue/babel-helper-vue-jsx-merge-props @vue/babel-preset-jsx @vue/test-utils apollo-boost autoprefixer babel-eslint babel-jest babel-loader babel-plugin-istanbul babel-plugin-syntax-jsx babel-plugin-transform-object-rest-spread chalk chokidar clean-webpack-plugin compression-webpack-plugin connect-history-api-fallback core-js coveralls cross-env cryptiles css-loader download eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eventsource-polyfill express extract-loader extract-text-webpack-plugin file-loader fork-ts-checker-webpack-plugin graphql graphql-tag graphql-voyager hoek html-loader html-webpack-plugin http-proxy-middleware identity-obj-proxy inquirer jest jest-serializer-vue jsdoc jsdoc-to-markdown latest mini-css-extract-plugin node-sass npm nprogress optimize-css-assets-webpack-plugin ora postcss-loader prerender-spa-plugin progress-bar-webpack-plugin pug pug-loader sass-loader shelljs style-loader ts-jest ts-loader tslint tslint-config-standard tslint-loader typescript uglifyjs-webpack-plugin url-loader vue vue-apollo vue-class-component vue-cropper vue-hot-reload-api vue-html-loader vue-i18n vue-loader vue-property-decorator vue-router vue-style-loader vue-template-compiler vuex vuex-class watchpack webpack webpack-bundle-analyzer webpack-dev-middleware webpack-dev-server webpack-hot-middleware webpack-merge workbox-window write yargs

@infinitebrahmanuniverse/nolb-vue2 @everything-registry/sub-chunk-3099

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 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

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

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

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

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

开始使用

安装

（真心推荐 yarn，npm 经常丢包，要不就用 cnpm）

全部加载

在项目中使用

局部加载

加载指定组件

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

通过 script 标签加载使用

构建单页应用（spa）和多页应用（mpa）

全局安装 vue2do

命令行

初始化应用项目

构建应用

例子

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

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

.apprc配置解析

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