vue3 +vite + pinia + ts

发表于 更新于 分类于 阅读次数：

创建项目

1
npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。通过该手脚架创建的项目以 vite 为打包工具，同时还支持 ts，状态管理使用的是 pinia（已取代 vuex）。

相关文档

vue：https://cn.vuejs.org/。

vite：https://cn.vitejs.dev/。

pinia：https://pinia.web3doc.top/。

vue3 setup 语法糖如何给组件命名

虽然它会根据文件名自动为组件命名，但是有时我们想自定义组件名该怎么办呢？

方法一

再添加一个 script 标签，为 name 属性赋值：

1
2
3
4
5
6
7
8
<script>
    export default {
      name: 'xxx',
    };
</script>

<script setup>
</script>
方法二

如果同时使用了 vite 的话，可以配合插件直接在 script 标签中设置 name，具体方式如下：

（1）安装插件 vite-plugin-vue-setup-extend

1
npm install vite-plugin-vue-setup-extend

（2）配置 vite.config.ts

1
2
3
4
5
6
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

（3）使用

1
2
3
<script lang="ts" setup name="xxx">

</script>