Vue 封装自定义组件，通过npm install的方式安装使用

1、新创建一个空的项目

1.  
   npm install -g @vue/cli 安装脚手架4的版本
2.  
   vue create vue-demo 使用安装的脚手架创建一个新的vue项目
3.  
   npm run serve 运行创建的项目命令

2、在src下创建一个package文件夹用于存放自己的自定义组件，我创建了一个测试文件夹（mapuse）,下面创建了一个mapuse.vue文件，文件内容如下：

注意： 自己封装的组件里面一定要有name属性，为后期install node包后 在页面使用的组件名

1.  
   <template>
2.  
   <div>
3.  
   {{ test }}---{{ name }}
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   export default {
8.  
   name: 'mapuse',
9.  
   data () {
10.  
    return {
11.  
    test: '123'
12.  
    }
13.  
    },
14.  
    props: {
15.  
    name: {
16.  
    type: String,
17.  
    default: ''
18.  
    }
19.  
    }
20.  
    }
21.  
    </script>

3、在package文件夹下创建一个index.js文件，内容如下：

 require.context('../package', true, /\.vue$/)路径是在此文件中找到对应的vue文件的路径

1.  
   const requireAll = require.context('../package', true, /\.vue$/)
2.  
   export const install = ((Vue) => {
3.  
   requireAll.keys().map(fileName => requireAll(fileName)).forEach(({ default: curComp }) => {
4.  
   Vue.component(curComp.name, curComp)
5.  
   })
6.  
   })
7.  
   // 这个方法以后再使用的时候可以被use调用
8.  
   export default install

4、修改项目根目录下package.json，增加一句打包代码：

"package": "vue-cli-service build --target lib ./src/package/index.js --name mapuse --dest mapuse"

1.  
   "scripts": {
2.  
   "serve": "vue-cli-service serve",
3.  
   "build": "vue-cli-service build",
4.  
   "lint": "vue-cli-service lint",
5.  
   "package": "vue-cli-service build --target lib ./src/package/index.js --name mapuse --dest mapuse"
6.  
   },

打包命令解释：

--target lib 关键字 指定打包的目录

--name 打包后的文件名字

--dest 打包后的文件夹的名称

然后执行打包命令：

npm run package

打包执行完成后我们项目目录下就会多出一个mapuse文件夹，存放的是打包后的文件。

5、想要发布到npm仓库，我们还得在文件夹下初始化一个package.json文件。

在mapuse目录下，执行命令：

npm init -y

会生成一个package.json的文件

 注意： package.json文件中的name里面不能有大写！！！

6、发布到npm仓库

1）注册账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网（npm）注册一个账号，注意记住用户名、密码和邮箱，发布的时候会用到。

（2）设置npm源

有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：

npm config set registry=https://registry.npmjs.org

（3）添加npm用户

进入common-package-ui目录，添加npm用户，执行命令：

npm adduser

这里会让你填写用户名、密码(不会显示出来 就正常输入后enter就行)、邮箱，然后会收到一封邮件，邮件里面有个临时验证码 需要输入，如果之前设置过即可跳过此步。

（4）发布npm

在mapuse目录下执行命令：

npm publish

如果发布失败可在百度搜索失败code码，一般都是名字重复或者名字不合格

7、使用

在另外一个项目中进行安装

npm install 插件名称（package.json中的名称）

然后在main.js引用注册，代码如下：

1.  
   import mapuse from 'mapuse'
2.  
   Vue.use(mapuse)

新建一个空的vue文件使用此插件

<插件名称></插件名称>

完成！

这篇好文章是转载于：学新通技术网