有段時間沒做獨立的 vue 組件了，最近突然想把一個常用的 vue 組件打成一個 npm 包，方便使用。好久不用，發現已經忘記環境怎么搭建。翻看以前的組件，才慢慢回想起來，中間還出現些問題。在這記錄下開發過程，以備忘。

一、新建工程

打成 npm 包的 vue 組件一般不會太復雜，當然如果是做一個 UI 庫( 如：element-ui )，那另說。這里使用 vue-cli官方提供的 webpack-simple 模板來創建工程

vue init webpack-simple <project-name> 復制代碼

二、初始化工程，安裝相關依賴

yarn install 復制代碼

三、創建組件相關目錄

1、src 目錄下新建 lib 文件夾，用來放置組件相關的文件。

2、在 lib 下新建 index.js 文件，用來導出組件。index.js 內容如下：

import Demo from './demo.vue'const demo = {install (Vue) {Vue.component(Demo.name, Demo)} } // IIFE if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(demo) } export default demo 復制代碼

3、在 lib 下新建 demo.vue 文件，作為組件入口文件。demo.vue 內容如下：

<template><!--組件 html 結構--> </template><script>export default {name: "Demo",props: {},data() {return {};},mounted() {},methods: {} }; </script><style scoped></style> 復制代碼

三、修改 webpack.config.js，進行編譯相關配置

const path = require('path') const webpack = require('webpack') const ENV = process.env.NODE_ENV.trim() const pJson = require('./package.json')module.exports = { // 入口，區分 ENV 環境變量entry: ENV==='production' ?'./src/lib/index.js':'./src/main.js', // 輸出output: ENV==='production' ?{path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: pJson.name + '.js',library: pJson.name, libraryTarget: 'umd', umdNamedDefine: true }:{path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'build.js'}, module: {rules: [{test: /\.css$/,use: [ 'vue-style-loader', 'css-loader'],}, {test: /\.vue$/,loader: 'vue-loader',options: {loaders: {} // other vue-loader options go here}},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {name: '[name].[ext]?[hash]'}}]},resolve: {alias: { 'vue$': 'vue/dist/vue.esm.js'},extensions: ['*', '.js', '.vue', '.json']},devServer: {historyApiFallback: true,noInfo: true,overlay: true},performance: {hints: false},devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map'module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': {NODE_ENV: '"production"'}}), // source-map 配置，區分 ENV 環境變量new webpack.optimize.UglifyJsPlugin({sourceMap: ENV==='production' ? false : true,compress: {warnings: false}}), new webpack.LoaderOptionsPlugin({minimize: true})]) } 復制代碼

四、組件效果預覽

1、修改 src/main.js 導入組件

import Demo from './lib/index.js' Vue.use(Demo) 復制代碼

2、修改 src/App.vue 使用組件

<template><div id="app"><Demo/></div></template> 復制代碼

3、運行 ,瀏覽器預覽效果

yarn run dev 復制代碼

五、發布

1、修改 package.json

"name": "demo", "main": "dist/demo.js", "private": false, 復制代碼

2、修改 .gitignore ，刪除 dist 條目，如果不刪除，提交時會忽略 dist 文件夾的內容，發布后 npm 安裝使用時，會找不到文件，因為組件編譯好的文件是放在 dist 目錄下。

3、編寫 README ，介紹組件的功能

4、發布( 默認已有帳號，且已登錄 )

yarn run build npm config set registry=https://registry.npmjs.org npm publish 復制代碼

總結

以上是生活随笔為你收集整理的vue 组件发布记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。