项目搭建

热重载：将一个项目切分成多个JS，同时利用浏览器的协商缓存。

etag: 文件唯一标识

如果某一片代码没有改变，devServer返回304，浏览器继续使用原来的文件，否则，返回200，响应新的js文件

nodejs 分析文件 rollup 标识 文件id

vite起步

要构建一个 Vite + Vue 项目（node使用16）：

# npm 6.x

npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:

npm create vite@latest my-vue-app -- --template vue

# yarn

yarn create vite my-vue-app --template vue

# pnpm

pnpm create vite my-vue-app --template vue

模板可选：
vanilla，vanilla-ts,vue,vue-ts，react，react-ts，react-swc，reactswc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

 cd my-vue-app
  yarn
  yarn dev

 引入 ElementPlus+ pinia

 依赖下载

npm i element-plus pinia / yarn add element-plus pinia

配置element-plus

// main文件中
// 组件样式引入
import 'element-plus/dist/index.css'
// 完整安装element-plus
import ElementPlus from 'element-plus'
// 安装插件
app.use(ElementPlus)

配置pinia

// main文件中
// 引入pinia
import { createPinia } from 'pinia'

// 安装 Pinia 
app.use(createPinia());

问题：初始vite项目找不到： 找不到“./App.vue”或其相应的类型声明

 解决：

// vite-env.d.ts 下方添加以下代码，使得main.ts识别vue文件
declare module '*.vue' {
    import type { DefineComponent } from "vue";
    const component:DefineComponent<{}, {}, any>
    export default component
}

简单使用 pinia

创建store目录，目录下创建user.ts

import { defineStore } from "pinia";

export const useUser = defineStore(
    {
        id: 'user',
        state() {
            return {
                user: {}
            }
        },
        actions: {
            setUser(newUser: any){
                this.user = newUser;
            }
        }
    }
)

在函数内调用方法

<script setup lang="ts">
import { useUser } from './store/user'
const useStore = useUser(); // 必须函数内调用方法
const changeUser = () => {
  useStore.setUser({ name: 'hey' })
}
</script>

<template>
  <div>
    <button @click="changeUser"> {{ useStore.user }}</button>
  </div>
</template>

组件内直接调用

<script setup lang="ts">
import { useUser } from '../store/user'
// defineProps<{ msg: string }>()
const useStore = useUser();

</script>

<template>
  <p>helloworld: {{ useStore.user }}</p>
</template>

解构

// 解构专用
import { storeToRefs } from "pinia";
const { user:u } = storeToRefs(useStore)

// {{ u }}