【vue组件库搭建01】用脚手架搭建项目

一、安装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");

效果：