vue 组件发布记录
2019-01-10 07:47:09来源：博客园 阅读 ()
好久没做独立的 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
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
