vue3+vite+pinia+element-plus+vi18n生成框架记录。

基础语法

import {useRouter,useRoute,} from"vue-router";
const router = useRouter();
const route = useRoute();
//计算属性使用。
const keepAliveList = computed<[]>(() => {
  return tabsStore.keepAliveList;
});
// 数组重置
allMenus.length = 0;
allMenus.push(...[...menus]);

components

1.接收(defineProps)

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

2.触发父组件(defineEmit)

使用defineEmits存储emit事件。
const emit = defineEmits(["hideEdit","another"]);
触发事件调用：
const onClick = () => emit("hideEdit","value")

Pinia

1.简介

Pinia.js是新一代的状态管理器，即Vux5.x
特点：
1.完整的ts支持。
2.轻量，压缩后只有1.6kb。
3.去除mutations，只有state，getters，actions
4.actions支持同步和异步。
5.没有模块嵌套，只有store的概念，store之间可以自由使用。
6.无需手动添加store，store一旦常见便会自动添加。

2.数据持久化工具

pinia-plugin-persist
使用：
defineStore({id:'sessionkey',persist:true})
意义：在session storage存储数据。sessionkey对应ID，存储为引用类型。
引发：将多次取用值抽出单独文件。例：token，userInfo，permission

3.命名方式

参考官网源码定义方式:
文件常量名为use'功能模块'Store，比如token为useTokenStore。
使用为const tokenStore = useTokenStore();

4.存取值

取值省略state：tokenStore.token
修改/存值去掉commit：tokenStore.closeToken(tag);

types (ts)

1.interface接口

意义：为类型命名和为你的代码或第三方代码定义一个约定。

例：在使用pinia-tabs模块接收数据，自定义的MenuItem类和router格式同时调用面包屑的tab模块，需要做类型检测。

1.1 第三方插件使用

举例el-form使用ref
<el-form ref="editFormRef"></el-form>
import { FormRules, FormInstance } from "element-plus";
const editFormRef = ref<FormInstance>();
验证表单：Utils.validateForm(editFormRef.value);
??????疑问：为什么ref类型取值要.value

1.2 自定义

import type { RouteMeta } from "vue-router";
interface TabItem {
    name: string;
    path: string;
    meta: RouteMeta;
}

interface TabsState {
    tabsList: TabItem[];
    keepAliveList: string[];
}
state: (): TabsState => {
        return {
            tabsList: [
                {
                    path: "/profile",
                    name: "Profile",
                    meta: {
                        title: "首页",
                    },
                },
            ],
            keepAliveList: ["Profile"],
        };
    },

2.泛型

**意义：关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。 **

// case:
interface A<T=string> {
  name: T;
}
const strA: A = { name: "Semlinker" };
const numB: A<number> = { name: 101 };
// 使用计算属性：
const keepAliveList = computed<[]>(() => {
  return tabsStore.keepAliveList;
});
// 计算属性源码：
export declare function computed<T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
注：T代表TYPE，在定义泛型时通常用作第一个类型变量名称。也可以用任意有效名称代替
一种规范：
1.K（Key）：表示对象中的键类型；
2.V（Value）：表示对象中的值类型；
2.E（Element）：表示元素类型。

3.d.ts

意义：“d.ts”文件用于为 TypeScript 提供有关用 JavaScript 编写的 API 的类型信息。简单讲，就是你可以在 ts 中调用的 js 的声明文件。TS的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JS编写的，并不支持类型系统。这个时候你不能用TS重写主流的库，这个时候我们只需要编写仅包含类型注释的 d.ts 文件，然后从您的 TS 代码中，可以在仍然使用纯 JS 库的同时，获得静态类型检查的 TS 优势。

3.1语法

3.1.1 module

3.1.2 类

3.2 @Types

3.2.1简介

在 Typescript 2.0 之后，TypeScript 将会默认的查看 ./node_modules/@types 文件夹，自动从这里来获取模块的类型定义。

node_modules任意层的@types都会被应用，妨碍内存优化。

3.2.2配置

tsconfig.json
compilerOptions:{
  	"types": ["vite/client", "element-plus/global", "pinia-plugin-persist"],
}

4.自动类型推导

4.1关键字

4.1.1 typeof

意义：获取某个数据的类型，作用于类为类的构造函数。

4.1.2 in 与keyof联用，暂时不用

4.1.3 keyof 暂时不用

vite

1.plugin

1.1.1 vite-plugin-restart保存config配置刷新

1.1.2 unplugin-vue-components/vite 自动引入组件，无需import

1.1.3 unplugin-auto-import/vite 自动引入hooks

1.1.4 vite-plugin-compression 压缩

1.1.5 vite-plugin-html 压缩html

1.1.6 rollup-plugin-visualizer

2.问题

2.1.1 unplugin-vue-components 按需导入的依赖项更新导致页面无限次重载

[vite] ✨ new dependencies optimized: element-plus/es, element-plus/es/components/row/style/css, element-plus/es/components/form/style/css, element-plus/es/components/button/style/css, element-plus/es/components/form-item/style/css, …and 1 more
[vite] ✨ optimized dependencies changed. reloading

思路：排除重载的依赖项。
const optimizeDepsElementPlusIncludes = ["element-plus/es"];
    fs.readdirSync("node_modules/element-plus/es/components").map((dirname) => {
        fs.access(
            `node_modules/element-plus/es/components/${dirname}/style/css.mjs`,
            (err) => {
                if (!err) {
                    optimizeDepsElementPlusIncludes.push(
                        `element-plus/es/components/${dirname}/style/css`
                    );
                }
            }
        );
    });
 optimizeDeps: {
            include: optimizeDepsElementPlusIncludes,
        },

国际化

1.vue-i18n

通常使用：在local/index创建vuei18n实例，导入elementui和自己的内容。main引用

$i18n.locale = lang使用。

为了更好的抽取语言包和维护代码，将语言包模块化管理，对应vue文件。

//单个文件合并，并且key值为name.key，对应值为语言包文件[key]：
export function buildLocales(key:string,codes:any){
  let ret: any ={};
  for (let k in codes){
    ret[key+'.'+k] = codes[k];
  }
  return ret
}
en.ts/zh.ts
import { buildLocales } from "./integrated";
import profile from "./ens/profile";
export default{
  ...buildLocales("profile",profile)
}
profile.ts
export default {
    查询: "search",
};
//在vue文件中使用：需要封装函数转换为'profile.查询',在i18n.global中查找return对应值。
export function i18nt(prefix:string,key:string):string{
  const {t} = i18n.global;
  let message = t(prefix + '.' + 'key');
  return String(message)
}
//使用
function t(key: string): string {
  return Utils.i18nt("user", key);
}
<div>{{t('用户名')}}</div>

2.element-plus国际化

使用官方提供el-config-provider标签：
App.vue
<el-config-provider :locale="locale">
    <router-view></router-view>
</el-config-provider>
//动态设置
import zhLocale from "element-plus/lib/locale/lang/zh-cn";
import enLocale from "element-plus/lib/locale/lang/en";
const locale = zhLocale||enLocale;
//获得全局设置语言：i18n.global.fallbackLocale.value

3.plugin引入语言包

3.1moment.js

import moment from "moment";
import "moment/dist/locale/zh-cn";
import "moment/dist/locale/en-au";

if (i18n.global.fallbackLocale.value == "zh") {
  moment.locale("zh-cn");
} else {
  moment.locale("en-au");
}

关于按需引入

1.element-plus

1.1.手动按需引入

新建global文件夹

index.ts
import { App } from "vue";
import registerElement from "./register-element";
export function globalRegister(app: App): void {
    app.use(registerElement);
}
register-element.ts
import { App } from "vue";
import "element-plus/dist/index.css";
import { ElButton } from "element-plus";

const components = [ElButton];
export default function (app: App): void {
    for (const component of components) {
        app.component(component.name, component);
    }
}
main.ts中引入：
import { globalRegister } from "./global";
app.use(globalRegister);

1.2自动按需引入

参考vite插件1.1.2

2.plugins

2.1 Echarts

参考官方按需引入文档。