preface

I’m going to start a new project recently, so of course it’s all the rage…

The technology stack is tentatively Vite, Vue3, Typescript, AtndV, Less

The environment

  • Windows 11
  • Node: v14.16.1
  • NPM: v6.14.12

Vite

First let’s take a look at the vuE-CLI corresponding build tools, and we can see that the introduction on the official website is very concise.

In general, it is very fast using native ESM and ESBuild.

install

npm init @vitejs/app
Copy the code

Then follow the instructions

Ts Node description package

Here we use the vuE-TS template, but sometimes we need to use node’s capabilities, and TS will indicate an error

npm install @types/node -D
Copy the code

We install the Description package for Node

Path alias

For ease of use, we add aliases in the viet.config. ts file

export default defineConfig({
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, 'src')
+}
+},
	 plugins: [
     vue()
   ]
})
Copy the code

We will find that setting ts just like this will cause an error. Let’s go to tsConfig to configure it

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
+ "paths": {
+ "@/*": ["./src/*"]
+}
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}
Copy the code

This won’t be an error, but the path association doesn’t work when we use aliases in vscode

Path of lenovo

Install Path Intellisense in Plugin and configure it in Settings as follows:

+ "path-intellisense.mappings": {
+ "@": "${workspaceRoot}/src/"
+}
Copy the code

This completes our alias configuration perfectly

Vue3 buckets

Vue3 corresponds to vue-router@4 and vuex@4, please be careful not to install the wrong version oh.

vue-router

npm install vue-router@4
Copy the code

Then we create the router under SRC

/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import routes from '@/config/routes.config'

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
Copy the code

I prefer to separate paths in config

/src/config/routes.config

import Index from '.. /views/index/index.vue'

const routes: any[] = [{path: '/'.component: Index
  }
]

export default routes
Copy the code

Then in main.ts

  import { createApp } from 'vue'
+ import router from './router'
  import vuex from './store'
  import App from './App.vue'

  const app = createApp(App)
+ app.use(router)
  app.use(vuex)
  app.mount('#app')
Copy the code

vuex

It’s worth noting that vuex@4 supports multiple warehouses, but I don’t have this requirement

Next we create a store under SRC

/src/store/index.ts

import { createStore } from 'vuex'

const store = createStore({
  state: {
    version: '1'}})export default store
Copy the code

Then in main.ts

  import { createApp } from 'vue'
  import router from './router'
+ import vuex from './store'
  import App from './App.vue'

  const app = createApp(App)
  app.use(router)
+ app.use(vuex)
  app.mount('#app')
Copy the code

Less installation

Since AntdV uses Less, we install it first.

This is already done internally in Vite, so we just need to install the language plug-in

npm install less -D
Copy the code

Start the Less Js runtime

Less cannot be imported into JS when it is not enabled

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components' const { resolve } = require('path') // https://vitejs.dev/config/  export default defineConfig({+ css: {
+ preprocessorOptions: {
+ less: {
+ javascriptEnabled: true
+}
+}
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
      ViteComponents({
        customComponentResolvers: [AntDesignVueResolver()],
      })
    ]
  })
Copy the code

AntdV installation

To our final site, here we configure the load on demand mode

First go to install AntdV official provided on demand plug-in

npm install vite-plugin-components -D
Copy the code

Then add the following configuration in viet.config. ts

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
+ import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'

  const { resolve } = require('path')

  // https://vitejs.dev/config/
  export default defineConfig({
  	css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true
        }
      }
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    plugins: [
      vue(),
+ ViteComponents({
+ customComponentResolvers: [AntDesignVueResolver()],
+})]})Copy the code

Then we can use it at any time

conclusion

Here we have set up the basic running framework, you can see that there are some differences with WebPack, but the basic flow is the same.

Here, thank you to the end!