江苏龙网

  1. 主页 > 生活百科 > >

搭建开箱即用的vue3框架( 四 )

vue3框架

或者 vue-router
// src/modules/router.tsimport { App } from 'vue'// 省略各种配置// 导出 default 接口export default (app: App) => app.use(router)当然 pinia 和 vue-router 已经预设好了，你不需要重新关注他们 。
具体可见实现 插件自动加载实现
 
19. Vitest 单元测试支持在 src/test 目录中可以书写单元测试 。
import { it, describe, expect, assert } from 'vitest'describe('suite name', () => {it('foo', () => {expect(1 + 1).toEqual(2)expect(true).to.be.true})it('bar', () => {assert.equal(Math.sqrt(4), 2)})it('snapshot', () => {expect({ foo: 'bar' }).toMatchSnapshot()})})然后在终端中输入命令即可测试
pnpm test# 或者 npm run test# 或者 yarn test或者生成报告
pnpm coverage# 或者 npm run coverage# 或者 yarn coverage具体可见 Vitest
 
20. 支持 Markdown 渲染markdown 渲染可以用来书写一些简单的说明 。
只需要把 src/pages 目录下的页面后缀由 .vue 改为 .md，然后再改为 markdown 语法即可 。
例如 src/pages/about.md
## About Page> The page is markdown file当你路由到 /about 后即可看到对应的 markdown 渲染 。
具体可见 vite-plugin-md
 
21. 路径别名~支持~ 路径将被导向项目的 src 目录 。
<!-- src/pages/index.vue --><script lang="ts" setup>import { useDarks } from "~/composables/dark"// 等价于// import { useDarks } from "../composables/dark"</script> 
22. 命令行自动创建与删除只要输入，即可创建一个标准的页面或组件
pnpm auto:create# 或者 npm run auto:create# 或者 yarn auto:create当然也可以进行删除
pnpm auto:remove# 或者 npm run auto:remove# 或者 yarn auto:remove 
23. i18n 国际化支持在日常的业务当中，可能会存在一些需要国际化的场景 。那么只需要在根目录下的 locales 中定义不同语言的 yml 即可在项目中做到开箱即用的国际化支持 。
比如 locales/en.yml 中用来定义需要国际化支持的英文内容 。
# locales/en.yml# Englishindex: indexabout: aboutnot-found: Notfound又如 locales/zh-CN.yml 中用来定义需要国际化支持的中文内容 。
# locales/zh-CN.yml# 中文index: 主页about: 关于not-found: 未找到页面此时在组件中即可这样用
<script setup>// 该api是全局按需引入的，所以可以直接用// t 用来绑定特定的语块const { t, locale } = useI18n()const toggleLocale = () => {// locale.value 用来表示当前所属语言，可修改进行语言切换locale.value = https://www.isolves.com/it/cxkf/kj/2022-04-06/locale.value === 'zh-CN' ? 'en' : 'zh-CN'}更详细的说明可见用到的 vite 插件 @
intlify/vite-plugin-vue-i18n 与 vue插件 vue-i18n 。
另外 yml 是目前前端中流行的配置文件格式，语法可见阮一峰先生的 YAML 语言教程 。
vscode 插件推荐:

  • 多合一的 i18n 支持 i18n Ally
 
24. 漂亮的404页支持在日常业务中，当用户访问不存在的页面时，应该给到我们的用户一个不存在的信息提示，而这个提示的页面就是 404 页 。
你可以随便访问一个不存在的页面，例如 /bucunzai
搭建开箱即用的vue3框架

文章插图
 
当然还有暗黑模式适应 。
也支持简单的响应式适应 。例如移动端浏览器上会有正确的显示 。
当然如果这个 404 的封面不符合你的口味，那么可以在 pages/[...notFound].vue 中修改 img 标签的 src 。默认是 32.svg，支持 1 ~ 33 的 svg 。
例如，默认
<!-- 省略各种代码 --><template><img src=https://www.isolves.com/it/cxkf/kj/2022-04-06/"/notFound/32.svg" class="cover" alt="page not found" />修改 /notFound/32.svg 为 /notFound/33.svg
<!-- 省略各种代码 --><template><img src=https://www.isolves.com/it/cxkf/kj/2022-04-06/"/notFound/33.svg" class="cover" alt="page not found" />即可切换封面为
搭建开箱即用的vue3框架


推荐阅读


上一篇：淘宝店铺装修报价 店铺装修设计费一般多少钱

下一篇：海南省投诉 海南省消费局