欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 组件发布记录

程序员文章站 2022-08-12 08:54:53
好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用。好久不用,发现已经忘记环境怎么搭建。翻看以前的组件,才慢慢回想起来,中间还出现些错误。在这记录下开发过程,以备忘。 一、新建工程 打成 npm 包的 vue 组件一般不会太复杂,当然如果是做一个 UI ......

好久没做独立的 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