heny / template-vue3-ts

template-vue3-ts

vue3-ts

一个基于vue3的typescript模板，使用时建议直接fork，可以随时关注模板的更新

安装功能

• stylelint
• eslint
• prettier
• pinia
• vue-router
• 加入自动按需引入
• svg引入组件

增加UI组件库

下面以element-plus为例，直接配置按需引入即可，其他组件库也是如此 其他支持按需引入的组件库： https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/index.ts

1. 安装

pnpm add element-plus

2. 按需引入 修改vite.config.ts文件

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

3. 之后可以直接在vue文件中使用了

增加markdown组件

1. 安装

pnpm add @vueuse/head
pnpm add -D vite-plugin-md markdown-it-link-attributes markdown-it-prism

2. main入口文件加入

import { createHead } from '@vueuse/head'
app.use(createHead())

3. vite.config.ts配置

import Markdown from 'vite-plugin-md'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['@vuevue/head']
    }),
    Markdown({
        wrapperClasses: 'markdown-body',
        headEnabled: true,
        markdownItOptions: {
          html: true,
          linkify: true,
          typographer: true,
        },
        markdownItSetup(md) {
          // https://prismjs.com/
          md.use(Prism)
          md.use(LinkAttributes, {
            matcher: (link: string) => /^https?:\/\//.test(link),
            attrs: {
              target: '_blank',
              rel: 'noopener',
            },
          })
        },
      }),
  ]
})

4. 新增views/markdown.vue 文件

<template>
  <MarkdownPage />
</template>
<script lang="ts" setup>
import MarkdownPage from '@/docs/Test.md'
</script>

5. 添加一个新的路由

{
  name: 'Markdown',
  path: '/markdown',
  component: MarkdownPage,
  meta: {
    title: 'markdown',
  },
}

6. 下载markdown样式 地址：https://prismjs.com/plugins/file-highlight/#examples 点击DOWNLOAD，选择对应的主题，滚动到最下面，点击下载css 添加src/assets/styles/markdown.scss，并将下载好的css内容复制进去

.markdown-body {
  // 复制到这里
}

之后将该css文件在index.scss文件内导入