标签：methods 研究 index rar 打包 .com 一个 bsp yarn
需求
因之前是做外包项目居多，经常用到相同的组件，之前的办法是在一个项目中写一个组件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以，自己研究准备去封装一个组件库，
前言
日常在项目中我们经常直接根据 npm install/ npm i 去安装插件/组件库
例如:npm i element-ui -S, npm install vux --save
内容
1.vue项目安装(如已安装，可略过此步骤)
全局安装webpack
npm install webpack -g 或者 npm install -g webpack
安装vue-cli
npm install --global vue-cli //vue-cli2 # OR npm install -g @vue/cli //vue-cli3 # OR yarn global add @vue/cli //vue-cli3
2.新建组件
在项目中找到src/components下新建input.vue组件 <template> <div class="about"> <input :type="typeInput" @change="inputChange" /> </div> </template> <script> export default { props: { typeInput: String }, methods: { inputChange(val) { this.$emit("change", val); } } }; </script>
3.新建components/index.js
import Vue from "vue"; import Input from "./input/index.vue"; const Components = { Input }; Object.keys(Components).forEach(name => { Vue.component(name, Components[name]); }); export default Components;
4.修改package.json
{ "name": "@npm官网中username/项目名", "version": "0.1.0", //每次更新库都需要修改版本号，以免影响 "private": false, //需要设置为私有 "main": "./dist/component-library-gao.common.js", //指定该属性后，当引用组件库时，会默认加载main中指定的文件 "files": [ //引用组件库可以访问的文件 "dist/*", "src/*", "public/*", "*.json", "*.js" ], "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build-bundle": "vue-cli-service build --target lib --name component-library-gao ./src/components/index.js", //直接打包项目中的组件，将此发布到npm上 "lint": "vue-cli-service lint", "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit" }, }
标签：methods 研究 index rar 打包 .com 一个 bsp yarn
原文地址：https://www.cnblogs.com/gqx-html/p/10821224.html
