Github address: github.com/zptime/shan…

1. Perform initial configuration for the Vite project

Vite official Chinese documentation: cn.vitejs.dev/guide/

  • Install vite
$ npm init @vitejs/app
Copy the code
  • Initialize the Vite project template: Select vuE-TS as the template
$ npm init @vitejs/app shanglv-vite-antdv -- --template vue
Copy the code

  • After the template is installed, run the environment

    • Go to the installation directory: CD Shanglv-viet-antDV
    • Install dependency: NPM install
    • Start: NPM run dev

  • Open the browser to view the result: http://localhost:3000/

2. Vuex configuration

Vuex official document: next.vuex.vuejs.org/

  • Install Vuex. Currently, there is no Chinese document for 4.x, please refer to the Chinese document for reading
$ npm install vuex@next --save
Copy the code
  • Create store/index.ts in the SRC directory
import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import type { App } from "vue";

InjectionKey Provides the type when the store is installed into the Vue application, which is passed to the useStore method

// Manually declare the state type
export interface State {
  count: number;
}

// Define the injection type
const key: InjectionKey<Store<State>> = Symbol(a);const store = createStore<State>({
  state() {
    return {
      count: 0}; },mutations: {
    increment(state: State){ state.count++; ,}}});// Inject type into useStore
// All references in future projects will be custom ones, instead of useStore exported by vuex by default
export function useStore() {
  return baseUseStore(key);
}

export function setupStore(app: App<Element>) {
  app.use(store, key);
}

export default store;
Copy the code
  • The main ts change
import { createApp } from "vue";
import { setupStore } from "./store"; // State management
import App from "./App.vue";

const app = createApp(App);

setupStore(app); // Introduce state management

app.mount("#app");
Copy the code
  • The components/HelloWorld. Vue modification
<template>
  <h1>{{ msg }}</h1>
  <button type="button" @click="increment">count is: {{ count }}</button>
</template>

<script lang="ts">
  import { defineComponent, computed } from "vue";
  // Note that the useStore introduced here is custom, not exported by vuex by default; You need to configure an alias to facilitate import
  // import { useStore } from 'vuex'
  import { useStore } from "store/index";

  export default defineComponent({
    name: "HelloWorld".props: {
      msg: {
        type: String.required: true,}},setup: () = > {
      const store = useStore();
      return {
        count: computed(() = > store.state.count),
        increment: () = > store.commit("increment"),}; }});</script>

<style scoped></style>
Copy the code
  • Vite configuration alias: Modify the vite. Config. ts configuration file
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
const resolve = (dir: string) = > path.join(__dirname, dir);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@ /": resolve("src/*"),
      comps: resolve("src/components"),
      store: resolve("src/store"),}}});Copy the code

Error 1: Module ‘PATH’ or its corresponding type declaration cannot be found The name “__dirname” could not be found.

Solutions:

npm install @types/node --save-dev
Copy the code

Cannot find module ‘store/index’ or its corresponding type declarations.Vetur(2307)

Possible cause: The parent directory of the current project is the root directory. Maybe Vetur does not know which folder is the true root directory.

Solutions:

(1) Configure baseUrl and Paths in tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ". /"."paths": {
      "@": ["src/*"]."comps/*": ["src/components/*"]."store/*": ["src/store/*"]}}}Copy the code

(2) open a new window in vscode with the current project root directory as the top-level directory; And the project files must be placed first.

  • Effect display after configuration:

3. Vue Router 4

Vue Router official Chinese documents: next.router.vuejs.org/zh/introduc…

  • Install command
$ npm install vue-router@4
Copy the code
  • Modify the app. vue file
<template>
  <router-view></router-view>
</template>

<script lang="ts">
  export default {
    name: "App"};</script>

<style></style>
Copy the code
  • Create router/index.ts in the SRC directory
import { createRouter, createWebHistory } from "vue-router";
import type { App } from "vue";

const HelloWorld = () = > import(".. /components/HelloWorld.vue");
const About = { template: "<div>About</div>" };
const User = {
  template: ` 
      
 
       
User {{ $route.params.id }}
 
        
      
`};const routes = [
  { path: "/".component: HelloWorld },
  { path: "/about".component: About },
  { path: "/users/:id".component: User },
];

const router = createRouter({
  // createWebHashHistory (Hash route Hash mode #)
  // createWebHistory (history routing HTML5 mode recommended, requires server configuration support)
  // createMemoryHistory With the cache history route
  // Add baseUrl createWebHistory(baseUrl)
  history: createWebHistory(),
  routes,
});

export function setupRouter(app: App<Element>) {
  app.use(router);
}

export default router;
Copy the code
  • The main ts change
import { createApp } from "vue";
import { setupStore } from "./store"; // State management
import router, { setupRouter } from "./router"; / / routing + +
import App from "./App.vue";

const app = createApp(App);

setupRouter(app); // Import routes
setupStore(app); // Introduce state management ++

router.isReady().then(() = > {
  app.mount("#app");
});
Copy the code
  • Problem solving

[Vue warn]: Missing Required prop: “MSG” at <HelloWorld onVnodeUnmounted=fn ref= ref < undefined >

// Remove required from helloworld.vue
export default defineComponent({
  name: 'HelloWorld'.props: {
    msg: {
      type: String.// required: true,
      default: 'Hello Vue 3 + TypeScript + Vite'}}... })Copy the code

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

The component provides template options, but runtime compilation is not supported in this build of Vue. Configure your Bundler alias Vue: Vue /dist/vue.esm-bundler.js

// Configure the alias in vite.config.ts
/ / reference document: https://blog.csdn.net/qq_41499782/article/details/112505665
export default defineConfig({
  resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",}}});Copy the code

4. Sass/Scss preprocessor

$ npm install -D sass sass-loader
Copy the code

Ant Design of Vue installation and configuration

Liverpoolfc.tv: 2 x.antdv.com/docs/vue/ge…

$ npm i --save ant-design-vue@next
Copy the code

(1) Global introduction

Add the libs/ antDV. ts file in the SRC directory

// (1) global import
import type { App } from "vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

export function setupAntd(app: App<Element>) :void {
  app.use(Antd);
}
Copy the code

Modify the main.ts file

import { createApp } from "vue";
import { setupStore } from "./store"; // State management
import router, { setupRouter } from "./router"; / / routing
import { setupAntd } from "./libs/antdv"; / / add + +
import App from "./App.vue";

const app = createApp(App);

setupRouter(app); // Import routes
setupStore(app); // Introduce state management
setupAntd(app); / / add + +

router.isReady().then(() = > {
  app.mount("#app");
});
Copy the code

Warning: You are using a whole package of antd, both please use www.npmjs.com/package/bab… to reduce app bundle size. Not support Vite !!!

Solution: To load on demand, use the babel-plugin-import plug-in, which does not support Vite. The following uses manual load on demand and the Viet-plugin-IMP plug-in load on demand.

(2) Manual introduction on demand

Modify the antDV. ts file

import type { App } from "vue";
import Button from "ant-design-vue/es/button"; / / load JS
import "ant-design-vue/es/button/style/css"; / / load the CSS
// import 'ant-design-vue/es/button/style'; / / load LESS

import Radio from "ant-design-vue/es/radio";
import "ant-design-vue/es/radio/style/css";
import Checkbox from "ant-design-vue/es/checkbox";
import "ant-design-vue/es/checkbox/style/css";

export function setupAntd(app: App<Element>) :void {
  app.use(Button);
  app.use(Radio);
  app.use(Checkbox);
}
Copy the code

(3) Use plug-ins to introduce on demand

I’m going to introduce them as needed, and I’m going to write each one individually, which is kind of a hassle. Therefore, the use of vite-plugin-IMP plug-in to help us introduce, the effect is the same.

See the documentation: github.com/vitejs/vite…

Install vite – plugin – imp

$ npm i vite-plugin-imp -D
Copy the code

Modify the vite. Config. ts file

import { defineConfig } from "vite";
import vitePluginImp from "vite-plugin-imp";

export default defineConfig({
  plugins: [
    vue(),
    vitePluginImp({
      libList: [{libName: "ant-design-vue"./ / style: (name) = > ` ant - design - vue/es / ${name} / style/CSS `, / / load the CSS
          style: (name) = > `ant-design-vue/es/${name}/style`./ / load less},],}),],css: {
    preprocessorOptions: {
      less: {
        // Create a custom theme
        modifyVars: { "primary-color": "#1188ff" },
        javascriptEnabled: true,},},},});Copy the code

When loading the less file, you need to install the LESS dependency. In this case, you can customize the theme style to override the default style. If the CSS file is loaded, no installation is required

$ npm i less -D
Copy the code

Modify the antDV. ts file

import type { App } from "vue";
import { Button, Radio, Checkbox } from "ant-design-vue";
const components = [Button, Radio, Checkbox];

export function setupAntd(app: App<Element>) :void {
  components.forEach((component: any) = > {
    app.use(component);
  });
}
Copy the code

Modify the components/HelloWorld. Vue components

<a-button type="primary" @click="increment">count is: {{ count }}</a-button>
<a-radio checked>Radio</a-radio>
<a-checkbox checked>Checkbox</a-checkbox>
Copy the code

Implementation effect