初始化專案

這裡我們通過@vue/cli拉取簡單配置的模板來初始化一個2.X的專案

vue init webpack-simple vue-test

初始化的專案目錄如下

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   └── main.js
└── webpack.config.js

接下來做一些改動。src目錄下新增components用於存放元件，新增一個index.js用於匯入元件進行註冊，再匯出

├── README.md
├── index.html
├── package
 
-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── index.js
│   └── main.js
└── webpack.config.js

在webpack.config.js同時修改entry及output，若想區分dev與build，在此處就不在寫例子了

entry: './src/index.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 
 
'demo.min.js', 
    library:'lsDemoUI',
    libraryTarget: 'umd',
    umdNamedDefine: true
},

在index.js裡註冊並匯出元件

import radio from "./components/c-radio.vue"
import checkbox from "./components/c-checkbox.vue"
import collapse from "./components/c-collapse.vue"
import timeline from "./components/c-timeline.vue"
import dialog from 
 
"./components/c-dialog.vue"


const comps=[radio,checkbox,collapse,timeline,dialog]

const components={
    install(Vue){
        comps.map(component=>Vue.component(component.name, component))
    }
}
if(typeof window!=='undefined'&&window.Vue) window.Vue.use(components)
export default components

完善package.js，main的路徑為dist/demo.min.js 與webpack.config.js裡的filename的保持一致

{
  "name": "ls-demo-ui",
  "description": "A Vue.js project",
  "version": "1.6.0",
  "author": "aaron <[email protected]>",
  "license": "MIT",
  "main": "dist/demo.min.js",
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }
}

至此已經是一個具備釋出到npm的元件庫了，如何上傳npm和npm私有服務請自行百度