闭坑教程开始:
1、安装vue-cli的最新版本,或者用 npm view @vue/cli versions 看看自己想要的版本安装。
npm i @vue/cli -g
2、创建自己的工程
vue create my-project
在空工程里,基于vue2.x的项目和vue3.x最大的区别就在于一个是new Vue,一个是createAPP的方法。在这里我们选择vue3.x.x和使用独立的配置文件,因为后面我们使用vue.config.js,其他的按照自己的需要选择。
3、配置工程目录:
将src改为examples,创建packages文件夹用来放自己的组件代码,根目录创建vue.config.js最后目录结构如下:
4、配置package.json,需要注意一下几点,我标注到注释里:
{
"name": "vue3-scrollbar", //不能和现有npm项目重名,你可以去npm官方搜索看看
"version": "0.1.9",
"private": false, //这里必须是false,否则无法发布到npm
"author": {
"name": "Your Name",
"email": "youremail@qq.com"
},
"main": "lib/component.umd",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name component --dest lib packages/index.js" //这行比较重要,别人使用你的插件就是引用这个库里的内容来启动
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.1.4", //这个需要安装一下,用来生成lib库
}
}
5、如果你要在你的examples里给别人一个可以看的demo,那就需要配置vue.config.js,同时修改examples里的main.js
//vue.config.js
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html',
},
},
};
//examples/main.js
import { createApp } from 'vue';
import App from './App.vue';
import mycomp from '../packages/index';
createApp(App)
.use(mycomp)
.mount('#app');
6、编写组件代码,首先在packages里新建index.js文件,我这里给大家提供的是组件kit的方案,如果你只是写一个单一功能组件,可以自行修改我的代码:
import my-first-comp from './my-first-comp/index';
import my-second-comp from './my-second-comp/index';
const components = [my-first-comp, my-second-comp];
const install = function(Vue) {
if (install.installed) return;
install.installed = true;
components.map((component) => {
Vue.component(component.name, component);
});
};
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
my-first-comp,
my-second-comp
};
然后再packages里建立my-first-comp和my-second-comp的文件夹,里面都新建index.js和对应的first.vue、second.vue文件,下面我只给出一个例子:
//index.js
import my-first-comp from './first'; //这个first,就是指的同目录下的first.vue文件
my-first-comp.install = (Vue) => Vue.component(my-first-comp.name, my-first-comp); //注意这里几个地方都是你的组件名
export default my-first-comp; //这里也是
//first.vue
<template>
<div class="">My first vue3.0 component</div>
</template>
<script>
export default{
name: 'my-first-comp' //这个非常重要,就是未来你放到其他项目中,组件标签的名字,比如:<my-first-comp></my-first-comp>
}
</script>
7、回到刚才的package.json里,在默认基础上不是添加了一个lib命令?那么我们在发布到npm前,需要生成一下lib库:"npm run lib",这样就在根目录下生成了一个lib文件夹,里面是插件启动代码,我们的main参数指向的,就是这个里面的umd文件。如果报错,看看自己的DevDependencies里有没有@vue/compiler-sfc。
好了,一切搞定!
这就是一个最简单的使用vue-cli4.5创建Vue3.0插件的方法,如何发布到npm上呢?网上有的是教程,你去搜索下吧,无非就是注册然后npm publish,非常简单,可能唯一需要注意的是一些人要把npm源从taobao换成官方npm源。
好了,试试吧,我的第一个vue3插件叫vue3-scrollbar,欢迎大家试用哟