阅读源码 -【vite项目架构】
记录阅读源码的知识点-项目架构
为了省事,我们可以在项目架构时就把一切都准备好,虽然配置起来有点烦人,但是这样写项目的时候真的很方便很丝滑。
自动导入函数api
每次写响应式的时候都要导入ref,reactive等等,所以可以使用工具帮助我们自动导入: unplugin-auto-import
npm i -D unplugin-auto-import
安装好以后,开始配置
include
规定可自动引入的文件后缀。
使用正则表达可引入后缀，多条正则用数组包裹。
imports
全局引入 npm 包。
分为 预设 和 自定义。
dts: true, // 会在根目录生成auto-imports.d.ts，里面可以看到自动导入的api
这个生成的文件auto-imports.d.ts应该是要放在src里面的,不然ts会报错找不到变量
可以这样写: dts: 'src/auto-imports.d.ts',生成以后可以设置为false
eslintrc是用来解决eslint报错问题的配置项。当enabled为true时，会根据filepath生成一个eslint的配置文件。这个文件需要引入到eslint的配置文件中，例如：
// .eslintrc.js
module.exports = {
extends: [
...
'./.eslintrc-auto-import.json'
]
}本文由“壹伴编辑器”提供技术支持
自动导入组件
npm i -D unplugin-vue-components
vite配置
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})webpack配置
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-components/webpack')({ /* options */ }),
],
}vue-cli配置
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-components/webpack')({ /* options */ }),
],
},
}📝用法
在template中像平常一样使用组件，它将按需导入组件，不再需要导入和注册组件！如果您异步注册父组件（或懒加载路由），自动导入的组件将与其父组件一起进行代码拆分。
它将自动会把这段代码：
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>转换成:
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
import HelloWorld from './src/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
请注意，默认情况下，此插件将在 src/components 路径下导入组件。您可以使用 dirs 选项进行自定义。这意味着 src/components 目录下的所有vue文件会自动注册为组件，可以直接使用，无需导入与注册。
可以看到我们的component.d.ts中自动导入了components下面的组件
这个文件是会自动生成的,如果没有设置的话默认是在根目录下,我们将位置修改一下:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import autoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
autoImport({
dts: "./src/types/auto-imports.d.ts",
imports: ["vue"],
eslintrc: {
enabled: true,
filepath: "./.eslintrc-auto-import.json",
},
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
(++)dts: "src/types/component.d.ts",
}),
],
});这个部分学的有点乱 T T,因为资料不是很多,也没几篇文章讲的详细清楚。
📝 从UI库导入
我们内置了对一些流行UI库的解析器，例如Vuetify、Ant Design Vue和Element Plus，您可以通过以下方式启用它们：
// vite.config.js
import Components from 'unplugin-vue-components/vite'
import {
AntDesignVueResolver,
ElementPlusResolver,
VantResolver,
} from 'unplugin-vue-components/resolvers'
// your plugin installation
Components({
resolvers: [
AntDesignVueResolver(),
ElementPlusResolver(),
VantResolver(),
],
})import里面也是，比如ElMessage方法:
现在要使用的话,首先要安装element-plus
npm install element-plus --save
然后直接使用就可以了,现在就是按需引入,我们使用了哪个,就会在component.d.ts中自动引入声明,真的非常方便
本文由“壹伴编辑器”提供技术支持
自动导入图标
安装
npm i unplugin-icons -D
通过iconify使用Element Plus、Ant Design的图标集
按图标集安装
如果你想单独安装它们单独的安装他们，可以使用此规则：@iconify-json/[collection-id]比如安装element-plus↓
npm i iconify-json/ep
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver"; Components({
resolvers: [
// 自动导入 Element Plus 组件
ElementPlusResolver(),
// 自动注册图标组件
++ IconsResolver({
++ // @iconify-json/ep 是 Element Plus 的图标库, 指定collection，即指定为elementplus图标集ep
++ enabledCollections: ["ep"],
++ }),
],
}),
++ Icons({
++ // 自动安装图标库,这一步一定要,不然是会报错的
++ autoInstall: true,
++}),修改使用前缀
使用方法:
{prefix}-{collection}-{icon}
{前缀（默认i）}-{图标集名称（custom）}-{图标名称（refresh-line）}
如: {i-ep-plus}所有配置完以后的vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import autoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
autoImport({
dts: "./src/types/auto-imports.d.ts",
imports: ["vue"],
eslintrc: {
enabled: true,
filepath: "./.eslintrc-auto-import.json",
},
resolvers: [ElementPlusResolver(), IconsResolver({})],
}),
Components({
resolvers: [
ElementPlusResolver(),
IconsResolver({
enabledCollections: ["ep"],
}),
],
dts: "src/types/component.d.ts",
}),
Icons({
autoInstall: true,
}),
],
});
本文由“壹伴编辑器”提供技术支持
node.js的path模块
讲解之前，大致地讲解一下所涉及的知识点；
path 模块：用于处理文件和目录的路径的使用工具，使用前需先引入模块；
path.join()：用于链接路径，并且会自动转换当前系统路径的分隔符"/"或"\"；
path.resolve()：也是用于链接路径，但却和path.join()方法却很多不同，而且path.resolve()方法本身就自带一个to的绝对路径参数，也会自动转换分隔符，在某些场景用起来也方便很多；
__dirname：是node的一个全局变量，获得当前文件所在目录的完整目录名，搭配path一起使用；
直接给大家看一个写的很好的文章吧,解释的很清楚:
resolve和join的区别:
https://blog.csdn.net/m0_56730231/article/details/122199451?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-122199451-blog-118304378.235^v38^pc_relevant_sort_base3&spm=1001.2101.3001.4242.1&utm_relevant_index=3
本文由“壹伴编辑器”提供技术支持
自动导入样式
这个作者的源码中使用的是scss,那么scss和sass的区别是什么呢?
安装:
npm i -D sass
创建一个变量文件,用来存放样式变量
sass中的变量使用"$"符号
现在定义好了,要实现自动引入了
打开vite.config.ts
然后就可以开始使用啦
效果:
作者还在文档中补充了:
本文由“壹伴编辑器”提供技术支持
pinia
安装:
npm install pinia
引入:
// src/main.ts
import { createPinia } from "pinia";
import App from "./App.vue";
createApp(App).use(createPinia()).mount("#app");官方文档:
https://pinia.vuejs.org/zh/core-concepts/
这里写法分为两种模式,一种是选项式,一种是组合式,喜欢哪种就用哪种
如果没有全局引入的话,就需要在接收到defineStore的返回值(useStore)后传入pinia实例,否则会报错:
这就是因为没有全局引入,或者是在使用的时候pinia还没挂载实例
解决办法:
自行传入pinia实例
研究了好久明白了 T T
基本使用的话就很简单了:
代码版:
定义:
import { defineStore } from "pinia";
export const useUserStore = defineStore("user", () => {
// 相当于state
let name = ref("tom");
// 相当于getter
const getName = computed(() => {
return `name: ${name}`;
});
// 相当于actions(没有mutations了)
const changeName = () => {
name.value = "Peter";
};
return { name, getName, changeName };
});
使用:
<script lang="ts">
import { useUserStore } from "./store/index";
export default defineComponent({
setup() {
// 使用state
const userStore = useUserStore();
console.log(userStore.name);
// 使用getter
const name = userStore.getName;
console.log(name)
// 使用actions(上面有按钮,这是按钮事件)
const changeName = () => {
userStore.changeName();
console.log(userStore.name);
};
return {
changeName,
userStore,
name,
};
},
});
</script>本文由“壹伴编辑器”提供技术支持
环境变量
首先vite设置变量和vue-cli是不一样的,在vue-cli中必须以VUE_APP_开头,在vite中,必须以VITE_APP_开头
我们之前在使用vue-cli的时候可以用process.env获取环境变量,但是在vite中使用貌似不行,只会显示undefined
在官方文档中是这样写的:
在配置中使用环境变量#
环境变量通常可以从 process.env 获得。
注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
const env = loadEnv(mode, process.cwd(), '')
return {
// vite 配置
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV),
},
}
})所以需要这么修改defineConfig,传参进去:
关于env中的loadEnv:
mode就是我们当前的环境,第二个参数是环境变量配置文件所在目录,第三个参数如果没有填的话,就只会加载VITE开头的变量,如果传入"",那么就会加载所有前缀的变量,当然也可以指定前缀:
关于process.cwd()
process.cwd()方法是流程模块的内置应用程序编程接口, 用于获取node.js流程的当前工作目录。此方法返回一个字符串,该字符串指定node.js进程的当前工作目录。
我们看看打印出来的结果:
现在就是这样使用就OK
(属实是有点儿麻烦了hhh)
但是在别的环境下(.vue .ts .js)中,是可以直接使用import.meta.env.xxx直接获取变量的,但是在vite.config.ts中就只能用envLoad获取
这部分写得好乱...🥺算了反正也没人看
本文由“壹伴编辑器”提供技术支持
axios封装
虽然这个已经写过很多次了,但是还是要看看作者怎么写的。
首先下载安装不用多说了，这个作者这部分写得还比较简单
npm i axios
使用create方法创建axios请求实例
import axios from "axios";
import type { InternalAxiosRequestConfig, AxiosResponse } from "axios";
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL,
timeout: 50000,
headers: { "Content-Type": "application/json;charset=utf-8" },
});
// 请求拦截
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
return config;
},
(error: any) => {
return error;
}
);
// 响应拦截
service.interceptors.response.use(
(response: AxiosResponse) => {
return response;
},
(error: any) => {
return error;
}
);
基本上就是这些啦，后面继续写别的
腾讯云开发者
