Silk

一个自用的 Vue3 脚手架(github地址)

首先它肯定是基于 vue3 + ts + vite的

然后它集成了自己使用到的一些实用的库和插件。

如：tailwindcss、vue-router4、vueuse、pinia几个实用的工具。

以及让开发变得更丝滑的插件：vite-plugin-pages、unplugin-auto-import、unplugin-vue-components。

使用

// clone项目
git clone https://github.com/kaiser-9527/silk.git

// 安装依赖并运行 (推荐使用pnpm)
pnpm i & pnpm run dev

功能说明

告别手写 CSS

有了工具类的 css 框架tailwindcss，你不需要写一行 css，只需要用classname来装饰你的布局，你的注意力可以集中在HTML中。 太多太复杂？ 没关系，vscode有智能提醒的插件，而且他生成的这些都是有规律的，非常容易记住。更多的说明可以看我之前的一篇文章Tailwindcss发布了2.1版本，是时候“入手”了，不过当时发布的是2.1版本，现在已经到了3.x版本了。可以去官网了解更多好玩的东西。

以下是官网的例子：

当然也可以用windicss，windicss的出现是为了更好的性能和更快的速度。但是这在Tailwindcss出了jit模式之后，变得没那么有优势了。基于Tailwindcss的3.x以及更好的生态，所以选择了Tailwindcss。

可能是未来的vuex的样子

pinia实现了vuex5的提案。简化了写法，非常方便的TS支持，以及非常符合setup script风格。更多用法查看pinia官网

// 定义store
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
      name: 'kaiser'
  }),
  actions: {
      updateName (name){
          this.name = name
      }
  }
})

<template>
  <section>
    {{userStore.name}}
    <button @click="userStore.updateName">update</button>
  </section>
</template>

<script lang="ts" setup>
import {useUserStore} from '@/store/user'
const userStore = useUserStore()
</script>

Vue 超实用 hooks

vueuse 是一个基于 Composition API 的实用函数集合，类似以lodash，他是一个方法合计，但是是响应式的，也就是vue3的hooks，当然他也兼容vue2。里面提供了非常多好玩的hooks，值得一试，少写很多轮子。

下面的例子，移动鼠标，x y的值会实时变化：

<template>
  <div>pos: {{x}}, {{y}}</div>
</template>

<script setup lang="ts">
const { x, y } = useMouse()
</script>

类Nextjs的文件系统路由

Nextjs的基于文件系统的路由是非常方便和实用的。于是就有了vite-plugin-pages。 默认情况下，你写在src/pages下的.vue .js文件就是一个页面组件。

如：

• src/pages/users.vue -> /users
• src/pages/users/profile.vue -> /users/profile
• src/pages/settings.vue -> /settings

只需要在创建路由的时候引入就好：

import { createRouter } from "vue-router";
import routes from "~pages";

const router = createRouter({
  // ...
  routes,
});

~pages就是根据src/pages下的文件生成的路由规则。具体的规则可以查看这里

强大的 unplugin

重头戏来了，基于强大的统一插件构建系统unplugin，大佬们封装了三个非常实用的支持vite的插件，让开发体验更加丝滑。

unplugin-auto-import

自动引入，少些一大堆的import，尤其是在一个复杂的组件里面，经常会引入很多资源。有了这个插件，你可以省事很多。

你不需要：

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

你只需要：

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

不仅仅是vue3 api，它还提供了很多其他库的预设，你只需要在vite.confit.ts配置即可。

AutoImport({
  // targets to transform
  include: [
    /.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /.vue$/, /.vue?vue/, // .vue
    /.md$/, // .md  
  ],

  // global imports to register
  imports: [
    'vue',
    'vue-router',
    'vueuse-core'
  ],

  // custom resolvers
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ]
})

在配置项里面的import选项可以填入上面截图的预设项。上面的代码配置了vue vue-router vueuse，那么你就可以打代码里任性的使用这三者的API，而不需要手动import。

最重要的是，你可以配置自己的工具库，或者其他第三方框架等，非常灵活。

unplugin-vue-components

还是unplugin的封装，这次是组件，组件不需要引入，直接在template里面写就完事了。

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

当然这个HelloWord.vue必须存在在src/components/下面。

插件会解析你的template，遇到组件写法，就默认去src/components/下面找，你也可以配置其他的路径甚至多个路径。

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
        dirs: ['src/packages']
    }),
  ],
})

如果只是自动引入自定义组件，那还是不够，因为我们可能在项目中用到其他第三方组件，如Element naive-ui等。所以该插件也提供了大部分第三方Vue组件的预设。

// vite.config.js
import ViteComponents, {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'

// your plugin installation
Components({
  resolvers: [
    ElementPlusResolver()
  ]
})

配置了ElementPlus之后，你就可以在文件里面直接使用而不需要手动引入：

<template>
    <el-button>HI</el-button>
</template>

总结

这里只是把一些我发现的比较好的轮子拼凑在一起，具体项目情况还得具体分析。 而且还可以更进一步去做改进。

如：

• 基于unplugin，自动引入store。
• 做成CLI，生成项目的时候按需选择插件。

项目基本上是根据自己经验所做，边用边优化，有更酷的东西欢迎留言。