plugins = [vue(), vueJsx()];

import path from 'path'
const resolve = (dir: string) => path.join(__dirname, dir)
// resolve.alias属性
const resolve = {
  alias: [
    // '@':resolve("src"), // 1
    { // 2
      find: /\/@\//,
      replacement: resolve("src"),
    },
  ];
}

<template>
  <div class="font_center"></div>
</template>
<script>
  import "/@/utils/cssModel/base.css";
</script>

<template>
  <div :class="flex_center"></div>
</template>
<script>
  // 此处引入的css必须以.module.css结尾
  import cssCommon from "/@/utils/cssModel/common.module.css";
  // 或者
  // import { flex_center } from "/@/utils/cssModel/common.module.css";
  // console.log(cssCommon.flex_center);
  import { defineComponent } from "vue";

  export default defineComponent({
    name: "App",
    components: {},
    setup() {
      return {
        ...cssCommon, //必须在setup导出才可以在模板中使用
        // flex_center
      };
    },
  });
</script>

<!-- 直接在style申明lang='less'即可使用 -->
<style lang="less" scoped>
  .home {
    font-size: 24px;
    div {
      color: red;
    }
  }
</style>

// 导入整个对象
import res from "./res.json";
// 对一个根字段使用具名导入 - 有效运用 tree-shaking！
import { data } from "./res.json";

// package.json
"scripts": {
  "dev": "vite --host", // 添加了host
  "build": "vue-tsc --noEmit && vite build",
  "serve": "vite preview"
},

// package.json
"scripts": {
  "dev": "vite --host --mode development",
  "pro": "vite --host --mode production",
  "test": "vite --host --mode test",
  "build": "vue-tsc --noEmit && vite build",
  "serve": "vite preview"
},

// 导出一个函数，入参的 command, mode 为当前的环境和信息
import { defineConfig, loadEnv, ConfigEnv } from "vite";
export default ({ command, mode }: ConfigEnv) => {
  //command "build" | "serve" 打包还是编译
  // mode 各种环境
  const root = process.cwd(); //项目根目录寻找env文件时使用
  const env = loadEnv(mode, root); // 获取配置的环境变量
  // console.log(env);
  return defineConfig({});
};

// server选项配置代理，基本与webpack一致
server: {
  port: Number(env.VITE_PORT), // 端口号
  proxy: createProxy(JSON.parse(env.VITE_PROXY)),
  hmr:true // 热更新
},

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"],
      unitPrecision: 5,
    },
  },
};

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
// 方法需从 vue-router导出
// 支持ts 可直接导出路由对象的接口 RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../view/index.vue"),
  },
];
// createRouter变成一个方法，而不需要 new VueRouter
// hash还是history模式也变更为方法
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

// store.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0, b:12 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
// 具体使用
import { useCounterStore } from '/@/store/index';
import { storeToRefs } from 'pinia' //辅助函数
const counterStore = useCounterStore(); // 获取该仓库
// 变量需要使用storeToRefs包裹才可以生成副作用 这种写法可直接return b
const { b } = storeToRefs(counterStore)
// 方法可直接解构使用
const { increment } = counterStore

// 重置store
function reset() {
  counterStore.$reset()
}

// 修改的3种方式
function change(){
  counterStore.$patch({
    count:500,
    b:2
  })
  // or
  // counterStore.$state = { count: 500, b:2 }

  // or storeToRefs的方式才可使用
  // b.value = 500
}

// 或者计算属性控制 例如：count
return {
  count: computed(() => counterStore.count), // 计算属性导出
  b,
  increment,
  reset,
  change
};

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import { createPinia } from 'pinia';
const pinia = createPinia();
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount("#app");

// interface
interface User {
  name: string
  age: number
}
interface SetUser {
  (name: string, age: number): void;
}

// type
type User = {
  name: string
  age: number
};
type SetUser = (name: string, age: number): void;

//interface 继承
interface Name {
  name: string;
}
interface People extends Name {
  age: number;
}

// type交叉
type Name = {
  name: string;
};
type People = Name & {
  age: number;
};

// interface 继承 type
type Name = {
  name: string;
};
interface People extends Name {
  age: number;
}

// type与interface交叉
interface Name {
  name: string;
}
type People = Name & {
  age: number;
};

// 基本类型别名
type Name = string;

// 联合类型
interface Name {
  name: string;
}
interface Age {
  age: number;
}
type Message = Name | Age;

// 具体定义数组每个位置的类型
type MessageList = [Name, Age];

let div = document.createElement("div");
type B = typeof div;

type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>; right: Tree<T> };

interface People {
  name: string;
  age: number;
}

interface People {
  sex: string;
}

/*
People 接口为 {
  name: string
  age: number
  sex: string
}
*/

const name = ref<string>("泛型T");