csit-npm-form

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

一、组件库

package.json

"lib": "vue-cli-service build --target lib --name csit-core --dest lib packages/index.js" "main": "lib/csit-core.umd.min.js"

vue.config.js

const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, // 扩展 webpack 配置，使 packages 加入编译 chainWebpack: config => { config.module .rule('js') .include .add('/packages') .end() .use('babel') .loader('babel-loader') }, configureWebpack: { resolve: { alias: { '@': resolve('packages') } } }, }

组件下 index.js // 导入组件，组件必须声明 name import UserSelect from './src'

// 为组件提供 install 安装方法，供按需引入 UserSelect.install = function (Vue) { Vue.component(UserSelect.name, UserSelect) }

// 导出组件 export default UserSelect

全局 index.js

// 导入UserSelect组件 import UserSelect from './UserSelect'

import { setConfig } from '@/utils/request' // 组件列表 const components = [ UserSelect ]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册 const install = function (Vue) { // 判断是否安装 if (install.installed) return // 遍历注册全局组件 components.map(component => Vue.component(component.name, component)) }

// 判断是否是直接引入文件 if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) }

export default { // 导出的对象必须具有 install，才能被 Vue.use() 方法安装 install, // 以下是具体的组件列表 UserSelect, setConfig }