項目里自己封裝了一些常用組件，但要是 新啟項目 還得手動復制過去。嘗試着能不能 像mint-ui似的，封裝成npm包， 以后直接使用npm安裝，肯定方便多了。
開干吧！！！
1、嘗試封一個普通組件 上傳到npm
使用vue-cli 創建一個 基礎項目。
1、組件改裝
本例使用的是 項目 自帶的 helloworld 組件，本身不用做改動。主要是一些配置文件的更改。
a、package.json文件
"name":"zha-vue-npm", "private":false,//公開項目 "license":"MIT",//開源協議 "main":"dist/hello-world.min.js",//打包后的入口文件
b、webpack.prod.config.js文件
修改output配置 和 css 文件名稱配置
// 固定的文件名稱 output: { path: config.build.assetsRoot, publicPath: config.build.assetsPublicPath, filename: 'hello-world.min.js', library: 'HelloWorld', libraryTarget: 'umd' }, optimization: { splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'all' }, manifest: { name: 'manifest', minChunks: Infinity }, } }, }, plugins: [ new webpack.DefinePlugin({ 'process.env': env }), new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: config.build.productionSourceMap, parallel: true }), new MiniCssExtractPlugin({ // 固定的css文件名稱 filename: utils.assetsPath('hello-world.min.css'), allChunks: true, }),
c、config/index.js文件
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: '/', // 跟js文件同級 assetsPublicPath: '/',
d、main.js 文件
將該組件導出
import HelloWorld from './HelloWorld.vue' export default HelloWorld;
e、.npmignore 文件：忽略 上傳到npm上的文件。沒有就新建
.DS_Store node_modules/ build/ config/ static/ .babelrc .editorconfig .gitignore .npmignore .postcssrc.js index.html package-lock.json npm-debug.log* yarn-debug.log* yarn-error.log* #Editordirectoriesandfiles .idea .vscode *.suo *.ntvs* *.njsproj *.sln
2、打包發布
- npm run build 打包
- 登錄npm賬號，進行發布
npm賬號注冊地址：https://www.npmjs.com
參考命令：
npm login //登錄npm npm publish //發布包 npm unpublish //刪除包
注意事項：
此處需要將 將淘寶鏡像 還原。否則 發布、安裝 都出問題。 // 查詢當前配置的鏡像 npm get registry //https://registry.npmjs.org/ // 設置成淘寶鏡像 npm config set registry http://registry.npm.taobao.org/ // 換成原來的 npm config set registry https://registry.npmjs.org/
另外，每次發布 需要 修改 package.json 里的 version。
還需要注意是否包名（package.json 里的 name）沖突，npm 平台已存在的話 不讓上傳。
3、使用
npm i zha-vue-npm (package.json 里面的name) import HelloWorld from'zha-vue-npm' import Css from'zha-vue-npm/dist/hello-world.min.css' // 樣式這么導入
我們已經完成了一個單一組件的打包發布。休息一下，接下來 弄我們自己的組件庫。
2、多組件的封裝、使用
參考鏈接：https://segmentfault.com/a/1190000015884948#articleHeader1
目標：
弄成 像mint-ui那樣，可以全局安裝所有，也可以 按需安裝部分組件
難點：
按需加載
按需加載實現原理：
利用 babel-plugin-component 插件，來實現按需加載。該插件需要的是 這樣一個文件結構
實現過程：
項目仍然是 vue-cli 搭建的基礎項目。
1、新建 components.json 文件（webpack 入口文件列表）
2、config/index.js文件中將assetsRoot，output的路徑設置為lib
3、webpack.prod.conf.js 文件配置
-
刪除HtmlWebpackPlugin相關配置，這里只需打包為js文件和css文件，不涉及html
-
引入components.json，根據配置的模塊及路徑配置入口entrys，配置完后，將入口寫入entry配置
-
output中，出口.js文件的名稱不能寫死
-
plugins中，ExtractTextPlugin相關配置 設置為'/theme/[name].css' 指定css 存放目錄 lib/theme
4、package.json 文件配置
"name": "vue-zyby-ui", "version": "0.0.15", "description": "A Vue.js project", "author": "zha <675486943@qq.com>", "private": false, "license": "MIT", "main": "lib/app.js", // 入口文件
5、main.js 導出組件
import AWord from './components/AWord.vue'; import Back from './components/Back.vue'; // install 是 用來全部安裝的關鍵 const install = function(Vue) { if (install.installed) return; Vue.component(Back.name, Back) Vue.component(NoData.name, NoData) }; export default { install, AWord, Back, };
使用：
導入全部組件. ```javascript import Vue from 'vue'; import zybyUi from 'vue-zyby-ui' import 'vue-zyby-ui/theme/index.css' Vue.use(zybyUi); ``` 導入指定組件. (用到 babel-plugin-component) ```javascript import { CallPhone, NoData } from 'mint-ui'; Vue.component(CallPhone.name, CallPhone); Vue.component(NoData.name, NoData); ``` ## babel-plugin-component 安裝 npm i babel-plugin-component -D 配置.babelrc ```javascript
{
"libraryName": "vue-zyby-ui",
"camel2Dash": false,
"styleLibrary": {
"name": "theme",
"base": true
}
},
```
## 注意事項 部分組件css 使用了rem單位，以適配移動端。因此 使用本組件庫前，所在項目應 進行適配改造。
改造所用庫： lib-flexible 和 postcss-px2rem-exclude ,參見以下鏈接 https://www.cnblogs.com/skylineStar/p/10036525.html
遇到的問題：
1、按需加載時，組件間 有一些公共樣式
利用 babel-plugin-component 的配置屬性 ，base : true。可以設置一個base.css 基礎樣式，按需加載時 會自動引入。
注意 不要把 全部安裝 和 按需安裝 混用，否則 base.css 讀取不到。
難點主要是 base.css 文件的生成，由於 webpack 無法單獨生成css文件（要依賴js）。這里 我新建了一個 base.js 文件，也作為了一個 webpack 的入口文件。
base.js // 僅僅是用來 生成 base.css 文件 import './assets/css/base.less'
在 components.json 里 引入 base。此時文件目錄如下
