1. 安裝 cli
npm install -g @vue/cli
vue create winyh-ui
2.安裝 antd-design-vue
cnpm i ant-design-vue --save
3.配置按需加載
cnpm i babel-plugin-import --save-dev
修改根目錄的 babel.config.js， 配置 babel-plugin-import
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
}
4.配置less
運行報錯：
Module not found: Error: Can't resolve 'less-loader'
解決辦法：
cnpm i less less-loader --save-dev
根目錄創建 vue.config.js 文件，配置如下
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
5.項目中引用
src/main.js 文件中
import Vue from 'vue'
import { Button, Select } from 'ant-design-vue';
import App from './App'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或寫為
* Vue.use(Button)
* Vue.use(Select)
*/
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount("#app");
組件中就可以使用：
<a-button type="primary">winyh</a-button>
6.啟動項目
npm run serve
預覽效果
7.封裝組件
新建 packages 目錄，packages 目錄下新建 index.js 文件對外集中拋出配置。
每個組件在 packages 目錄下以 單個目錄的形式存在，例如 row 組件結構。
row/src/main.vue 組件封裝 (組件封裝中必須設置 name 選項，為組件的對外唯一標簽)
row/index.js 對外拋出當前封裝的組件
// button/src/main.vue
<template>
<div>
<a-button>winyh<a-button>
</div>
</template>
<script>
export default {
name:"PButton",
}
</script>
<style lang="less">
</style>
// row/index.js
import PButton from './src/main.vue'
// 為組件提供 install 方法
PButton.install = function (Vue) {
Vue.component(PButton.name, Row)
}
// 導出組件
export default PButton
// packages/index.js
import PRow from './row'
// 組件集合，用於遍歷
const components = [
PRow
]
// 定義 install 方法
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,// 導出的對象必須具備一個 install 方法
...components, // 組件列表
}
組件封裝完畢
8.使用
import Vue from 'vue'
import { Button } from 'ant-design-vue'
import App from './App.vue'
// 導入組件庫
import PButton from '../packages'
// 使用組件庫
Vue.use(PButton)
[Button].forEach(item =>
Vue.use(item)
);
/*
* 也可以這樣使用
* Vue.component(Button.name, Button)
* Vue.component(Select.name, Select)
*/
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
在上一步用使用 Vue.use() 全局注冊后，即可在任意頁面直接使用了，而不需另外引入
<template>
<div id="app">
<PButton>winyh</PButton>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
</style>
9.打包
vue-cli 庫打包命令 官方介紹
vue-cli-service build --target lib --name myLib [entry] 這個入口可以是一個 .js 或一個 .vue 文件。如果沒有指定入口，則會使用 src/App.vue，改為 packages/index.js
配置package.json
name: 包名，該名字是唯一的。可在 npm 官網搜索名字，如果存在則需換個名字。version: 版本號，每次發布至 npm 需要修改版本號，不能和歷史版本號相同。description: 描述。main: "lib/vplgui.common.js", 入口文件，應指向編譯后的包文件(路徑要和上面構建出來的目錄和文件名對應上,如果不配置，我們在其他項目中就不用import XX from '包名'來引用了)keyword：關鍵字，以空格分離希望用戶最終搜索的詞。（"keywords": [ "vue", "maucash", "code", "maucash code" ]）author：作者- files : 指定打包后包中存在的文件夾 （"files": [ "dist", "src" ]）
private：是否私有，需要修改為 false 才能發布到 npm- homepage : "https://github.com/winyh/XXX", 項目主頁
- repository: 指定代碼所在的倉庫地址"repository": { "type": "git", "url": "git@github.com:winyh/vplgui.git" }
license： 開源
添加 .npmignore
// 語法跟 .gitignore 一樣 .DS_Store node_modules/ packages/ public/ vue.config.js babel.config.js # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode
添加 lib 腳本
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
+ "lib": "vue-cli-service build --target lib --name vplgui --dest lib packages/index.js"
},
}
--target: 構建目標，默認為應用模式。這里修改為lib啟用庫模式。--dest: 輸出目錄，默認dist。這里我們改成lib。[entry]: 最后一個參數為入口文件，默認為src/App.vue。這里我們指定編譯packages/組件庫目錄。- --name ：組件庫名稱。
執行 npm run lib 打包編譯。（會生成 lib 文件夾）
10.NPM中文文檔
https://www.npmjs.cn/
10.發布
npm login
npm adduser
npm publish
注意事項：每次發布時都需要遞進更新版本號！