vite + vue3 + ts 移动端开箱即用现代开发模板

中文 | English

SouthernWind https://blog.csdn.net/nanchen_J?type=blog

sw-template

vite + vue3 + ts 移动端开箱即用现代开发模板

特点 🐶

1. Vite 的
2. Vue3 的
3. 文件路由
4. 布局系统
5. Mock 后续支持
6. Api 自动引入
7. 组件自动引入
8. VueUse 支持
9. TypeScript 的
10. Tailwind css 的
11. 暗黑模式待开发
12. pinia 状态管理
13. pnpm 包管理器
14. 路径别名支持
15. 环境变量配置支持
16. defineOptions 支持
17. defineModel 支持
18. 开箱即用的 axios 请求封装
19. 支持ESlint,Prettier

克隆模板 🦕

1. Github

git clone

2. Gitee

git clone git@gitee.com:dishait/tov-template.git

node 版本推荐 🐎

因为该模板完全面向现代，所以推荐使用 node 当前的长期维护版本 v20

使用 🐂

该模板仅支持 pnpm 包管理器 👉 安装教程

1. 安装依赖

pnpm install

2. 开发

pnpm dev

3. 预览

pnpm preview

# 开启 host
pnpm preview:host

# 自动打开浏览器
pnpm preview:open

4. 打包

pnpm build

5. 依赖更新

# 依赖版本更新
pnpm deps:fresh

# 以上命令仅对包信息 package.json 进行写入，需要重新执行包安装命令
pnpm i

6. 代码规范校验

pnpm lint

# 校验时修复
pnpm lint:fix

动机 😲

为什么要做这个 模板 呢？

1. 为下次开发节省浪费在配置上的时间
2. 结合主流插件整合现代开发架构，提高开发效率

使用场景 ⚖️

什么时候你应该用?

1. 不想浪费时间在项目配置上
2. 希望尝试用更现代的方式开发 web 应用，提高开发效率

组织 🦔

欢迎关注 Southern Wind

• 官网
• Gitee
• Github
• CSDN
• 掘金

详情 🐳

1. Vite 的

该模板采用 vite 作为构建工具，你可以在根目录下的
vite.config.ts 对项目的构建进行配置。

对于众多主流插件的引入和繁杂配置已经整合到根目录下的预设 presets
中，大多数情况下你是不需要重新对它们进行配置的。

2. Vue3 的

基于Vue3框架开发当前版本为 3.4.29
更新到最新版请使用以下命令

pnpm install vue@latest

3. 文件路由

目录结构即路由。

eg:

• src/views/index.vue => /
• src/views/[...notFound].vue => 404 路由

4. 布局系统

默认布局

App.vue 将作为默认布局。

<!-- App.vue -->
<template>
  我是默认布局
  <router-view />
  <!-- 页面视图出口 -->
</template>

此时 src/views/index.vue

<!-- src/views/index.vue -->
<template>
  <div>我是首页</div>
</template>

路由到 /时，页面将渲染

我是默认布局 我是首页

此时 src/views/about.vue

<!-- src/views/about.vue -->
<template>
  <div>我是关于页</div>
</template>

路由到 /about 时，页面将渲染

我是默认布局 我是关于页

非默认布局

随便创建一个 src/layouts/custom.vue

<!-- src/layouts/custom.vue -->
<template>
  我是非默认布局custom
  <router-view />
  <!-- 页面视图出口 -->
</template>

此时 src/views/index.vue 内

<!-- src/views/index.vue -->
<template>
  <div>我是首页</div>
</template>

<!-- 添加自定义块 👇 -->
<route lang="json"> { "meta": { "layout": "custom" } } </route>

此时路由到 /, 页面将渲染

我是非默认布局custom 我是首页

具体可见 👉
vite-plugin-vue-meta-layouts

5. Mock 后续支持

6. Api 自动引入

原本 vue 的 api 需要自行 import。

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

现在可以直接使用。

const count = ref(0)
const doubled = computed(() => count.value * 2)

而且上边的 api 是按需自动引入的。

目前模板支持自动引入 api 的库列表 👉

• vue
• pinia
• vue-router
• @vueuse/core

只要确保已经安装依赖即可，具体可见 👉
vite-auto-import-resolvers，

1. src/api 也是自动按需导入，与上述类似

具体可见 👉
unplugin-auto-import。

7. 组件自动引入

原来需要 import

<!-- src/views/index.vue -->
<script setup lang="ts">
  import Hello from '../components/Hello.vue'
</script>

<template>
  <Hello />
</template>

现在只要在 src/components 下定义的组件都将会按需引入，即 import 是不需要的。

<!-- src/views/index.vue -->
<template>
  <Hello />
</template>

8. VueUse 支持

Vue 组合式工具集
基础 Vue 组合式工具的集合

9. TypeScript 的

支持TypeScript

10. Tailwind css 的

Tailwindcss 是一个开发中速度更快的 原子css 库。

直接在模板中用就行了，不需要配置。

<template>
  <div class="bg-red-500 text-white">我是红色背景的白色文本</div>
</template>

上述模板将渲染红色背景白色的字。

具体可见 👉 tailwindcss

11. 暗黑模式待完善

具体可见 👉 vue-dark-switch

12. pinia 状态管理

pinia 是下一代的状态管理库，比 vuex 更简单，ts 支持更好。

你可以在 src/stores 中进行状态的定义。

例如创建 src/stores/counter.ts 👇

// src/stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state() {
    return { count: 0 }
  },
  actions: {
    inc() {
      this.count++
    }
  }
})

定义完后在 setup 中直接使用即可

<!-- src/views/index.vue -->
<script setup lang="ts">
    const Counter = useCounterStore()
<script>

<template>
    <div @click="Counter.inc">{{Counter.count}}</div>
</template>

更多具体使用可见 👉 pinia

13. pnpm 包管理器

pnpm 是非常优秀的包管理器，更快、更节省空间、更合理。

具体可见 👉 pnpm

14. 路径别名支持

~ 或者 @ 路径将被导向项目的 src 目录，同时有更好的类型提示

<!-- src/views/index.vue -->
<script lang="ts" setup>
  import { useDarks } from '@/composables/dark'

  // 等价于
  // import { useDarks } from "../composables/dark"
</script>

15. 环境变量配置支持

根目录下的 .env 用来对项目进行环境变量配置。

16. defineOptions 支持

<script setup lang="ts">
  // 定义额外的 options
  defineOptions({
    name: 'Foo'
  })
</script>

17. [defineModel 支持] 3.4+ (https://cn.vuejs.org/api/sfc-script-setup.html#definemodel)

// 声明 "modelValue" prop，由父组件通过 v-model 使用
const model = defineModel()
// 或者：声明带选项的 "modelValue" prop
const model = defineModel({ type: String })

// 在被修改时，触发 "update:modelValue" 事件
model.value = 'hello'

// 声明 "count" prop，由父组件通过 v-model:count 使用
const count = defineModel('count')
// 或者：声明带选项的 "count" prop
const count = defineModel('count', { type: Number, default: 0 })

function inc() {
  // 在被修改时，触发 "update:count" 事件
  count.value++
}

// 子组件：
const model = defineModel({ default: 1 })

// 父组件
const myRef = ref()

<Child v-model="myRef"></Child>

更多详情请参考 👉defineModel()

18. 开箱即用的 axios 请求封装

二次封装，开箱即用

19. 支持ESlint,Prettier