前端学习圈

Vue3 造轮子常用

vite环境变量配置

  1. 根目录建以下文件
.env.development
.env.production
  1. 修改vite.config.js
import { loadEnv, defineConfig } from 'vite'
export default defineConfig((env) => {
    const envs = loadEnv(env.mode, process.cwd())
    // 在.env.* 文件写的将会自动读取
    console.log(envs)
})

自动按需加载api、组件、样式

  1. 安装
pnpm add unplugin-vue-components unplugin-auto-import -D
  1. 修改vite.config.js
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    // https://github.com/antfu/unplugin-auto-import
    AutoImport({
      dts: './src/auto-imports.d.ts',
      // 这里写入按需加载的组件库
      imports: ['vue', 'pinia', 'vue-router', '@vueuse/core']
    }),
   // https://github.com/antfu/unplugin-vue-components
    Components({
      // 自动引入的后缀
      extensions: ['vue', 'md'],
        
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       
      dts: './src/components.d.ts',
      // imports 指定组件所在位置，默认为 src/components
      dirs: ['src/components/'],
    }),
  ],
}

增加页面加载进度条

  1. 安装
pnpm add nprogress
  1. 修改路由拦截器
import NProgress from 'nprogress'
router.beforeEach((to, from) => {
  if (!NProgress.isStarted()) {
    NProgress.start()
  }
})

router.afterEach((to, from) => {
  NProgress.done()
})
  1. 添加css样式文件并引入，地址：https://unpkg.com/nprogress@0.2.0/nprogress.css

增加UI组件库

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

  1. 安装
pnpm add element-plus
  1. 按需引入 修改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()],
    }),
  ],
}
  1. 直接在模板里面使用即可

增加markdown组件

  1. 安装
pnpm add @vueuse/head
pnpm add -D vite-plugin-md markdown-it-link-attributes markdown-it-prism
  1. main入口文件加入
import { createHead } from '@vueuse/head'
app.use(createHead())
  1. 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',
            },
          })
        },
      }),
  ]
})
  1. 新增views/markdown.vue 文件
<template>
  <MarkdownPage />
</template>
<script lang="ts" setup>
import MarkdownPage from '@/docs/Test.md'
</script>
  1. 添加一个新的路由
{
  name: 'Markdown',
  path: '/markdown',
  component: MarkdownPage,
  meta: {
    title: 'markdown',
  },
}
  1. 下载markdown样式 地址：https://prismjs.com/plugins/file-highlight/#examples 点击DOWNLOAD，选择对应的主题，滚动到最下面，点击下载css 添加src/assets/styles/markdown.scss，并将下载好的css内容复制进去
.markdown-body {
  // 复制到这里
}

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

让svg支持组件一样引入

  1. 安装
pnpm add vite-svg-loader -D
  1. 修改vite.config.js
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [
  	// ...
  	svgLoader()
  ]
})
  1. 使用示例
<script setup lang="ts">
import MyIcon from '@/assets/example.svg?component';
</script>

<template>
  <MyIcon />
</template>

配置scss全局变量

修改vite.config.js

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
      @import "@/assets/styles/variables.scss";
    `,
      javascriptEnabled: true,
    },
  },
},

封装hooks取全局数据

  1. 创建 useGlobal.ts 文件
import { getCurrentInstance } from 'vue'
function useGlobal() {
    const instance = getCurrentInstance() as unknown as ICurrentInstance;
    return instance.appContext.config.globalProperties;
}
export default useGLobal;
  1. 全局定义类型有更好的提示
interface ICurrentInstance extends ComponentInternalInstance {
    appContext: {
      config: { globalProperties: IGlobal };
    };
}

interface IGlobal {
    // ...
}