环境: Vue3+Vite
1. 创建vite.config.js
const path = require("path");
console.log(path.resolve(__dirname, "./src"));
module.exports = {
base: "/",
outDir: "target",
port: 3001,
open: true,
https: false,
ssr: false,
alias: {
//路径简写配置
"/@/": path.resolve(__dirname, "./src"),
"/@components/": path.resolve(__dirname, "./src/components"),
},
//跨域配置
proxy: {
},
};
2. 组件库编写
目录:
wx-headers代码
<template>
<div>
这是组件
</div>
</template>
<script >
export default {
name:'wxHeaders',
};
</script>
index.js
将组件通过install引入 这样每个页面就不需要在引入了
import wxHeader from "./headers/wx-headers.vue";
const components = [wxHeader];
export default {
install(Vue) {
components.map((el) => Vue.component(el.name, el));
},
};
3. main.js 配置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
//引入我们的组件库
import wxComponents from '/@components/';
const app = createApp(App)
app.use(wxComponents)
app.use(router)
app.mount('#app')
4. 使用
<template>
<div>
<wxHeaders></wxHeaders>
<div></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: [],
components: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped></style>