使用npm打造本身的vue組件庫

項目裏本身封裝了一些經常使用組件，但要是 新啓項目 還得手動複製過去。嘗試着能不能 像mint-ui似的，封裝成npm包， 之後直接使用npm安裝，確定方便多了。

開幹吧！！！

一、嘗試封一個普通組件 上傳到npm

使用vue-cli 建立一個 基礎項目。

一、組件改裝

本例使用的是 項目 自帶的 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

二、打包發佈

• 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 平臺已存在的話 不讓上傳。

三、使用

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' // 樣式這麼導入

 

---

 

---

---

 

 

咱們已經完成了一個單一組件的打包發佈。休息一下，接下來 弄咱們本身的組件庫。

二、多組件的封裝、使用

參考連接：http://www.javashuo.com/article/p-poclxuxg-ea.html

目標：

弄成 像mint-ui那樣，能夠全局安裝全部，也能夠 按需安裝部分組件

難點：

按需加載

按需加載實現原理：

利用 babel-plugin-component 插件，來實現按需加載。該插件須要的是 這樣一個文件結構

實現過程：

 項目仍然是 vue-cli 搭建的基礎項目。

一、新建 components.json 文件（webpack 入口文件列表）

二、config/index.js文件中將assetsRoot，output的路徑設置爲lib

三、webpack.prod.conf.js 文件配置

• 刪除HtmlWebpackPlugin相關配置，這裏只需打包爲js文件和css文件，不涉及html

• 引入components.json，根據配置的模塊及路徑配置入口entrys，配置完後，將入口寫入entry配置

 

• output中，出口.js文件的名稱不能寫死

• plugins中，ExtractTextPlugin相關配置 設置爲'/theme/[name].css'  指定css 存放目錄 lib/theme

 四、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", // 入口文件

五、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 ,參見如下連接 http://www.javashuo.com/article/p-cygziwwb-bk.html

遇到的問題：

一、按需加載時，組件間 有一些公共樣式

利用  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。此時文件目錄以下