Silk

A Vue3 scaffold for your own use (github address)

First of all it must be based on vue3 + TS + Vite

It then integrates some useful libraries and plug-ins that it uses.

Such as tailwindCSS, VUE-Router4, Vueuse, Pinia several practical tools.

And plugins that make development smoother: vite-plugin-pages, unplugin-auto-import, unplugin-vue-Components.

use

/ / / / clone git clone https://github.com/kaiser-9527/silk.git installation and operation, it is recommended to use PNPM) PNPM I & PNPM run devCopy the code

Functional specifications

Say goodbye to handwritten CSS

With tailwindCSS, the CSS framework for utility classes, you don’t need to write a single line of CSS, just decorate your layout with classnames, and you can focus your attention on the HTML. Too much too complicated? It doesn’t matter, vscode has a smart reminder plugin, and it generates them regularly and is very easy to remember. More on that in my previous article Tailwindcss released version 2.1 and it was time to “get in”, but it was 2.1 and now it’s 3.x. You can go to the official website for more fun things.

Here’s an example from the official website:

Of course, you can also use WindicSS, WindicSS is for better performance and faster speed. But this became less of an advantage after Tailwindcss went out of jit mode. 3.X based on Tailwindcss and better ecology, so Tailwindcss was chosen.

Maybe what the future Vuex will look like

Pinia implemented the Proposal of Vex5. Simplified writing, very convenient TS support, and very setup Script style. Check out pinia’s website for more

/ / define the store
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () = > ({
      name: 'kaiser'
  }),
  actions: {
      updateName (name){
          this.name = name
      }
  }
})
Copy the code
<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>
Copy the code

Vue super utility hooks

Vueuse is a collection of utility functions based on Composition API, similar to Lodash, which is a sum of methods, but is reactive, i.e. hooks of vue3, which are also compatible with VUe2. It has a lot of hooks that are fun to use, so it’s worth a try, a lot less wheels.

In the following example, the value of x and y changes in real time by moving the mouse:

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

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

File system routing of class Nextjs

Nextjs’s file system-based routing is very convenient and practical. Hence viet-plugin-Pages. By default, the.vue.js file you write under SRC /pages is a page component.

Such as:

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

You only need to import it when creating a route:

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

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

~pages is a routing rule generated based on files in SRC /pages. The specific rules can be found here

Powerful unplugin

The main thing is that, based on the powerful unified plugin building system unplugin, the big guys have packaged three very useful plugins that support Vite to make the development experience more silky.

unplugin-auto-import

Automatic import, a lot less import, especially in a complex component, often introduces a lot of resources. With this plugin, you can save a lot of time.

You don’t need to:

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

You just need to:

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

Not only the VUe3 API, it also provides presets for many other libraries, which you only need to configure in viet.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: [
    /* ... */
  ]
})
Copy the code

The import option in the configuration items can be filled with the default items in the screenshot above. The above code is configured with vue vue-Router vueuse, so you can use all three apis in your code without manually importing them.

On top of that, you can configure your own toollibraries, or other third-party frameworks, with great flexibility.

unplugin-vue-components

Unplugin wrapper again, this time component, components do not need to be imported, directly in the template is done.

<template> <div> <HelloWorld MSG ="Hello Vue 3.0 + Vite" />Copy the code

Of course this helloword. vue must exist under SRC /components/.

The plugin will parse your template, and when it comes to component writing, by default go to SRC /components/. You can also configure other paths or multiple paths.

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

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

If we just automatically introduce custom components, that’s not enough, because we might use other third-party components in our project, such as Element naive- UI, etc. So the plugin also provides presets for most third-party Vue components.

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

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

With ElementPlus configured, you can use it directly in your files without having to import it manually:

<template>
    <el-button>HI</el-button>
</template>
Copy the code

conclusion

This is just a patchwork of some of the better wheels I’ve found, and it’s a matter of project by project. And it can be further improved.

Such as:

  • Automatically introduce store based on unplugin.
  • Make it CLI, and select plug-ins as needed when generating projects.

The project is basically done according to their own experience, while using while optimization, there are more cool things welcome to leave a message.