实践一个Vue 3 + TypeScript + Vite + Pinia项目

新建一个项目

# 执行新建命令，选择vue vue-ts
yarn create vite vite-pinia-tsx
# 添加 sass 支持
yarn add sass -D
# 支持jsx tsx
yarn add @vitejs/plugin-vue-jsx -D
1
2
3
4
5
6

支持jsx、tsx

新建一个 UserComponent.jsx 文件
UserComponent.jsx

import { defineComponent } from "vue"

export default defineComponent({
  // 接收属性
  props: {
    name: String
  },
  setup(prop) {
    const {name} = prop
    return () => 
user：{name}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

在 app.vue 引入user.tsx
app.vue

1
2
3
4
5
6
7

直接引入 css scss

import './assets/css/styleDefault.css'
import './assets/css/style.scss'
1
2

直接引入json

新建 user.json 文件，并添加数据
user.json

{
  "id": 1,
  "name": "小洁", 
  "age": 18
}
1
2
3
4
5

在 app.vue 中引入文件并展示
app.vue

1
2
3
4
5
6
7
8
9
10

使用Pinia对数据进行状态管理

优势：dev-tools支持、热模块更换、支持typeScript、插件机制、支持服务端渲染等等

# 安装pinia
yarn add pinia
1
2

实现一个简单的增删功能
在 main.ts 引入pinia

// 引入pinia
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"

const app = createApp(App)
app.use(createPinia()).mount('#app')
1
2
3
4
5
6
7

新建文件夹 store，打开新建 index.ts。创建 useUserStore
store/index.ts

import { defineStore } from "pinia";

interface State {
  userList: User[]
}
// 定义一个 useUserStore 的数据管理
export const useUserStore = defineStore('user', {
  state: () => ({
      userList: [
        {
          id: 1,
          name: '小明'
        },
        {
          id: 2,
          name: '小芳'
        },
      ]
    }),
    actions: {
      deleteOne(id: number) {
        this.userList = this.userList.filter(item => item.id != id);
      },
      addUser(item:User) {
        this.userList.push(item)
      }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

components/UserList.tsx

import { defineComponent, PropType } from "vue"
import { useUserStore } from "../store";

export default defineComponent({
  props: {
    user: {
      type: Object as PropType,
      required: true,
    },
  },
  setup(prop) {
    const { user } = prop
    const { deleteOne } = useUserStore()
    const deleteUser = () => deleteOne(user.id)
    return () => 
{user.name}删除
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

git地址：
https://github.com/JackWsjls/vite-pinia-tsx