--- theme: channing-cyan --- 这是我参与8月更文挑战的第8天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831) # 开发 vue组件，并上传到 npm ### 前文淘宝源：https://registry.npm.taobao.org 正式源： https://registry.npmjs.org/ ##### 换源命令 npm config set registry https://registry.npm.taobao.org --global npm config list // ##### 运行环境 win10 node：v10.16.0 npm: 6.9.0 #### 项目github下载地址 * [项目地址](https://github.com/wanghao-fan/vue-replay.git) * [npm包地址](https://www.npmjs.com/package/vue-replay) --- ## 1.创建项目 mkdir vue-replay cd vue-replay npm init package name: (vue-replay) // 包名称默认文件名称 version: (1.0.0) // 版本号 description: 移动web端回复框（自动触发键盘弹起ios+Android）// 说明 entry point: (index.js) dist/index.js // 入口文件路径 test command: // 测试命令 git repository: https://github.com/wanghao-fan/vue-replay.git// 你的 git仓库 keywords: vue-replay // 关键词 author: nothing49199 // 作者 license: (ISC) // 许可证类型 ## 2.创建目录、文件 * 根目录下创建目录 src、 src/components；文件：.gitignore、README.md、webpack.config.js * components目录下创建 sendReplay.vue组件 * src 目录下创建 index.js 入口文件 import sendReplay from './components/sendReplay.vue' sendReplay.install = function(Vue) { Vue.component(sendReplay.name, sendReplay); }; export default sendReplay; * .gitignore .DS_Store node_modules package-lock.json # local env files .env.local .env.*.local mock-back .history # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? * webpack.config.js const path = require('path'); let VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development', // production development entry: { tree: './src/index.js' // 入口文件 }, output: { path: path.resolve(__dirname, './dist'), // 输出目录 filename:'index.js', // 输出文件名 library: 'vue-replay', // 指定的就是你使用require时的模块名 libraryTarget: 'umd', // 支持cmd，amd，及全局具体啥意思也没明白 libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define }, plugins:[ new VueLoaderPlugin() // 这里遇到坑了，不加 vue-load报错 ], module:{ rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.js$/, loader: 'babel-loader' }, { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader' } ] } ] } } ## 3. 下载npm 依赖 npm install 以下依赖 dependencies 依赖 * "babel-loader": "^8.0.6", * "css-loader": "^3.1.0", * "html-webpack-plugin": "^3.2.0", * "node-sass": "^4.12.0", * "sass-loader": "^7.1.0", * "style-loader": "^0.23.1", * "stylus-loader": "^3.0.2", * "vue": "^2.6.10", * "vue-loader": "^15.7.1", * "webpack": "^4.38.0", * "webpack-cli": "^3.3.6", * "webpack-dev-server": "^3.7.2", * "webpack-server": "^0.1.2" devDependencies * "@babel/core": "^7.5.5", * "@babel/preset-env": "^7.5.5", "babel-core": "^6.26.3", * "babel-preset-env": "^1.7.0", * "vue-template-compiler": "^2.6.10" ## 4. 打包发布项目 npm build // git 上传你的代码（也可以不传） // 注册一个 npm账号 npm login // 这了如果拟更换过 npm 源的话加个 --registry=https://registry.npmjs.org/ Username: *** Password:*** Email: (this IS public)：邮箱 npm publish 如果失败，检查一下 [npm官网](https://www.npmjs.com/)上是否已经存在相同名字，每次推得话更改一下版本号还有测试的时候，如果你的源taobao源，你发布包暂时只在国外源，taobao源是没有的，等过一段时间才能同步，拉去你写的包时同理可以加上 --registry 之指定一下源就可以了 ## 5.使用方法 [使用文档](https://github.com/wanghao-fan/vue-replay/blob/master/README.md)