中文 | 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 的

2. Vue3 的

pnpm install vue@latest

3. 文件路由

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 自动引入

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)

7. 组件自动引入

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

<template>
  <Hello />
</template>

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

8. VueUse 支持

9. TypeScript 的

支持TypeScript

10. Tailwind css 的

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

11. 暗黑模式待完善

12. pinia 状态管理

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

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

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

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

13. pnpm 包管理器

14. 路径别名支持

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

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

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

15. 环境变量配置支持

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