一、安装vue-cli
// 安装
npm i -g @vue/cli
// 检查安装版本
vue --version
二、创建项目
vue create eric-ui
三、修改项目目录
修改项目目录,且重新配置vue.config.js
四、测试demo
1.创建如下目录
main.vue:
<template>
<div class="e-demo">vue3</div>
</template>
<script>
export default {
name: "EDemo",
};
</script>
demo.scss:
.e-demo {
color: pink
}
components\lib\demo\index.js:
import EDemo from "./src/main.vue";
EDemo.install = function (Vue) {
Vue.component(EDemo.name, EDemo);
};
export default EDemo;
examples\main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "../components/css/demo.scss";
import EDemo from "../components/lib/demo/index";
console.log(EDemo);
const app = createApp(App);
app.use(router).use(EDemo).mount("#app");
效果: