編寫一個 vue 元件釋出至 npm
轉載：https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AAvue%E7%BB%84%E4%BB%B6%E5%8F%91%E5%B8%83%E8%87%B3npm.html#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE
初始化專案
建立專案（這裡以資料夾為 mycomponent 為例）：
vue create mycomponent
選擇配置
進入專案 npm i 安裝依賴
#清理專案資料夾
- 刪除
src/assets資料夾 - 刪除
src/components資料夾 - 刪除
src/views/About檔案 -
src/router/index.js檔案修改如下：import Vue from 'vue' import VueRouter from 'vue-router' import home from '../views/Home'; Vue.use(VueRouter) const routes = [{ path: '/', name: 'Home', component: home }] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export
default router -
src/views/Home.vue修改如下：<template> <div class="home"> </div> </template> <script> export default { name: 'Home', } </script>
- s
rc/App.vue修改如下：<template> <router-view/> </template>
- s
ublic/index.html修改如下：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> </head> <body> <div id="app"></div> </body> </html>
開發元件前的準備
-
現在src下的檔案只是用來展示我們寫的元件（做測試用）
-
在根目錄新建資料夾 myComponents，在此資料夾下進行開發元件
-
根目錄新建
vue.config.js配置：const path = require('path'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { /* 模板-src資料夾下用於展示demo內容 */ pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html', }, }, configureWebpack: { /* 配置別名 */ resolve: { extensions: ['.js', '.vue', '.json'], // 排除檔案型別 alias: { '@': resolve('myComponents'), // 要編寫元件的資料夾 'assets': resolve('src/assets'), 'views': resolve('src/views'), } }, output: { // 暴露預設匯出配置 libraryExport: 'default' } }, productionSourceMap: false, // 關閉檔案對映，避免生產環境F12看到原始碼 css: { extract: false, // 是否將css提取至獨立的css檔案中，false 則 js 控制不需要使用者匯入 css }, }
pages: 用於展示demo
configureWebpack：配置檔案別名與匯出配置
css.extract：配置css匯入方式
#編寫元件檔案
在開始之前先看看使用元件的時候，一般會做兩步（element 為例）：
import ElementUI from 'element-ui';
Vue.use(ElementUI);
- 為什麼要 use()?
use 方法其實就是呼叫 ElementUI 下 install 方法 (ElementUI.install)
如果外掛是一個物件，就需要提供一個 install 方法。
use() 呼叫 ElementUI.install 時會傳入兩個引數：第一個則是 Vue，第二個是可選物件
- 接下來在 myComponents 下建立 index.js 與 src/index.vue
index.js 編寫 install 方法並且暴露出去：
import componet from './src/index.vue'; componet.install = Vue => { Vue.component(componet.name, componet); }; export default componet;
import 引入自己寫好的元件，利用 install 傳入的 Vue 元件全域性元件。
src/index.vue 則是我們的元件：
<template> <div class="my-component"> {{test}} </div> </template> <script> export default { name: "myComponent", data() { return { test: "我的元件", }; }, }; </script> <style lang="less" scoped> .my-component{ font-size: 25px; } </style>
測試元件
#全域性註冊
在專案根目錄 src/main.js 中引入：
import test from '@/index'; // 這裡@ 別名指向的是 myComponents 資料夾 Vue.use(test);
在專案根目錄 src/views/Home.vue 中使用：
<template>
<div class="home">
<my-component/>
</div>
</template>
<script>
export default {
name: 'Home',
}
</script>
注意
這裡元件名使用的是 my-component 元件內的 name 的名字，要麼都駝峰，要麼都帶中劃線。釋出元件時最好在文件中說明清楚
#按需引入
<template>
<div class="home">
<test/>
</div>
</template>
<script>
import test from '@/index'; // 這裡@ 別名指向的是 myComponents 資料夾
export default {
name: 'Home',
components: {
test
}
}
</script>
釋出至 npm
#打包
配置 package.json
"scripts": { "lib": "vue-cli-service build --target lib --name myCom --dest lib myComponents/index.js" }
--target: 構建目標，預設為應用模式。這裡修改為 lib 啟用庫模式;
--name: 打包後的檔名;
--dest：輸出目錄資料夾名稱，預設 dist。這裡改成 lib;
[entry]：入口檔案，預設為 src/App.vue。這裡指定編譯 myComponents/index.js。
打包後 lib 資料夾下：
- xx.common.js 給打包器用的 CommonJS 包
- xx.umd.js：直接給瀏覽器或 AMD loader 使用的 UMD 包
- xx.umd.min.js：壓縮後的 UMD 構建版本
#package.json 修改
package.json 檔案:
"main": "lib/xxx.umd.min.js", // 設定入口檔案 "private": false, // 設定為公開庫 "keywords": [], // 設定搜尋關鍵詞 "description": "描述", "author": "作者", "name": "包的名稱", // 在 npm 官網上存在相同的名稱則會報錯無法上傳，會提示你沒有許可權修改此庫 "version": "0.1.0", // 版本，每次上傳的版本號不能相同，所以每次上傳都要手動升級版本號
配置 .npmignore
.npmignore 檔案中設定忽略上傳的資料夾，只有 package.json、README.md 才是需要釋出的。README 中寫清元件的用法、引數、如何引用、事件等等。
src/ myComponents/ public/ vue.config.js babel.config.js
釋出
首先 npmjs.com 上需要有一個賬號
如果設定了淘寶映象需要改回來，npm config set registry http://registry.npmjs.org
最後npm publish釋出元件到 npm 官網