vue 组件发布记录

好久没做独立的 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 内容如下：

 1 import demo from './demo.vue'
 2 
 3 const demo = {
 4   install (vue) {
 5     vue.component(demo.name, demo)
 6   }
 7 }
 8 // iife
 9 if (typeof window !== 'undefined' && window.vue) {  
10     window.vue.use(demo)
11 }
12 export default demo

 

3、在 lib 下新建 demo.vue 文件，作为组件入口文件。demo.vue  内容如下：

 1 <template>
 2   <!--
 3     组件 html 结构
 4     -->
 5 </template>
 6 
 7 <script>
 8 
 9 export default {
10   name: "demo",
11   props: {
12 
13   },
14   data() {
15     return {
16 
17     };
18   },
19   mounted() {
20 
21   },
22   methods: {
23   }
24 };
25 </script>
26 
27 <style scoped>
28 
29 </style>

 

三、修改 webpack.config.js，进行编译相关配置

 1 const path = require('path')
 2 const webpack = require('webpack')
 3 const env = process.env.node_env.trim()
 4 const pjson = require('./package.json')
 5 
 6 module.exports = {  
 7   // 入口，区分 env 环境变量
 8   entry: env==='production' ?'./src/lib/index.js':'./src/main.js',  
 9   // 输出
10   output: env==='production' ?
11     {
12       path: path.resolve(__dirname, './dist'),
13       publicpath: '/dist/',
14       filename: pjson.name + '.js',
15       library: pjson.name, 
16       librarytarget: 'umd', 
17       umdnameddefine: true 
18     }:{
19     path: path.resolve(__dirname, './dist'),
20     publicpath: '/dist/',
21     filename: 'build.js'
22   },  
23   module: {
24     rules: [
25       {
26         test: /\.css$/,
27         use: [          
28             'vue-style-loader',          
29             'css-loader'
30         ],
31       },     
32      {
33         test: /\.vue$/,
34         loader: 'vue-loader',
35         options: {
36           loaders: {
37           }          
38           // other vue-loader options go here
39         }
40       },
41       {
42         test: /\.js$/,
43         loader: 'babel-loader',
44         exclude: /node_modules/
45       },
46       {
47         test: /\.(png|jpg|gif|svg)$/,
48         loader: 'file-loader',
49         options: {
50           name: '[name].[ext]?[hash]'
51         }
52       }
53     ]
54   },
55   resolve: {
56     alias: {      
57           'vue$': 'vue/dist/vue.esm.js'
58     },
59     extensions: ['*', '.js', '.vue', '.json']
60   },
61   devserver: {
62     historyapifallback: true,
63     noinfo: true,
64     overlay: true
65   },
66   performance: {
67     hints: false
68   },
69   devtool: '#eval-source-map'
70 
71 }
72           
73 if (process.env.node_env === 'production') {  
74     module.exports.devtool = '#source-map'
75     module.exports.plugins = (module.exports.plugins || []).concat([    
76     new webpack.defineplugin({      
77       'process.env': {
78          node_env: '"production"'
79       }
80     }),    
81     // source-map 配置，区分 env 环境变量
82     new webpack.optimize.uglifyjsplugin({
83       sourcemap: env==='production' ? false : true,
84       compress: {
85         warnings: false
86       }
87     }),    
88     new webpack.loaderoptionsplugin({
89       minimize: true
90     })
91   ])
92 }

 

四、组件效果预览

 

1、修改 src/main.js 导入组件

1 import demo from './lib/index.js'
2 vue.use(demo)

 

2、修改 src/app.vue 使用组件

1 <template>
2   <div id="app">
3     <demo/>
4   </div>
5 </template>

 

3、运行 ,浏览器预览效果

yarn run dev

五、发布

 

1、修改  package.json

"name": "demo",
"main": "dist/demo.js",
"private": false,

 

2、修改 .gitignore ，删除 dist 条目，如果不删除，提交时会忽略 dist 文件夹的内容，发布后 npm 安装使用时，会找不到文件，因为组件编译好的文件是放在  dist 目录下。

 

3、编写 readme.md，介绍组件的功能

 

4、发布( 默认已有帐号，且已登录 )

yarn run build
npm config set registry=https://registry.npmjs.org
npm publish