The installationVite

Compatibility Note Vite requires node.js versions >= 12.0.0

npm init @vitejs/app
# OR
yarn create @vitejs/app
Copy the code

Create a project

  • Specify project names and templates directly through additional command-line optionsvue-ts.
# NPM 6. X NPM init @vitejs/app vite-ts --template vue-ts # NPM 7+  npm init @vitejs/app vite-ts -- --template vue-ts # yarn yarn create @vitejs/app vite-ts --template vue-tsCopy the code
  • After installation, start the project
cd vite-ts
npm install
npm run dev
Copy the code
  • The directory structure
├─ ├─ ├─ SRC // source code │ ├─ ├─ ├─ ├─ ├─ app.vue // import page │ ├─ main.ts ├── └.html // git ├── ├.txt // git ├── ├.txt // git ├── ├.txt // git ├── ├.txt // git ├── ├.txt // git ├── ├.txt // git ├── ├.txt // git ├── ├.txt package.json // package.jsonCopy the code

Installing a plug-in

eslintandprettierGrammar testing

npm i -D eslint babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier @vue/eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser 
Copy the code
  • New ESLint configuration item:.eslintrc.js
module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/prettier",
    ],
    parserOptions: {
        parser: "babel-eslint",
    },
};
Copy the code
  • New editor configuration format:.editorconfig
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
Copy the code

less

npm i less -D
Copy the code

@vue/babel-plugin-jsx

  • Vue 3 JSX and TSX syntax support.
npm i @vitejs/plugin-vue-jsx
Copy the code

Ant Design Vue 2.x

npm i --save ant-design-vue@next
Copy the code
  • A complete introduction
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(Antd);
app.mount("#app");
Copy the code

Full introduction to the console will give you a warning: You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. Not support Vite !!!

  • According to the need to load

Note: the babel-plugin-import on-demand loading does not support Vite, but we can use the viet-plugin-importer plug-in.

  • The installationvite-plugin-importerImplement on-demand loading:import { Button } from "ant-design-vue";
npm i vite-plugin-importer
Copy the code
  • configurationvite.config.ts
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import viteImport from "vite-plugin-importer";
export default defineConfig({
    plugins: [
        vue(),
        vueJsx({
            // options are passed on to @vue/babel-plugin-jsx
        }),
        viteImport({
            libraryName: "ant-design-vue",
            libraryDirectory: "es",
            style: true,
        }),
    ],
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
});
Copy the code

Vue Router 4.x

npm install vue-router@4
Copy the code
// router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const Login = () => import(/* webpackChunkName: "login" */ ".. /views/login"); const Layout = () => import(/* webpackChunkName: "layout" */ ".. /views/layout"); const Home = () => import(/* webpackChunkName: "home" */ ".. /views/home"); const NotFound = () => import(/* webpackChunkName: "NotFound" */ ".. /views/error/404"); const routes: RouteRecordRaw[] = [ { path: "/", redirect: "/login", meta: {}, component: Layout, children: [ { name: "Home ", path: "home", meta: {title: "home",}, Component: home,}, {// match /home/xxx path: "/home:afterUser(.*)", component: NotFound, }, ], }, { name: "login", path: "/login", component: Login, meta: { title: "Login",}}, {/ / XXX/matching path: / : pathMatch "(. *)", component: NotFound,},]; const router = createRouter({ history: createWebHistory(), routes, }); export default router;Copy the code

At this point, the project is basically set up

Tsx Trampling pit Guide

  • @ click = “XXX” is changed to: onClick = {} XXX or onClick = {() = > XXX (” arg “)}

  • The modifier @ click. Self = “XXX”

import { withModifiers } from "vue"; <button onClick={withModifiers(submit, ["self",])}>Copy the code
  • v-modle

Single: v-model={[foo, “value”]}

Modifier: v-model={[foo, “value”, [“modifier”]]}

Multiple: v – modles

v-models={[
    [foo, ["modifier"]],
    [bar, "bar", ["modifier"]],
]}
Copy the code
  • v-if
setup() {
    const foo = ref<boolean>(true);
    return () => (
        <div>
            {
                foo.value && (
                    <div>
                        <span>foo</span>
                    </div>
                )
            }
        </div>
    )
}
Copy the code
  • v-for
setup() {
    const bars: string[] = ["bar1", "bar2"];
    return () => (
        <div>
            {
                bars.map((item) => (
                    <span>{item}</span>
                ))
            }
        </div>
    )
}
Copy the code
  • Slot

The parent component

import { defineComponent } from "vue";
export default defineComponent({
    name: "name",
    setup(props, { slots }) {
        
        return () => (
            <div>
                <div>{ 
                    slots.default ? slots.default() : (
                        <span> foo </span>
                    ) 
                }</div>
                <div>{ slots.title?.() }</div>
            </div>
        )
    }
})
Copy the code

Child components

import { defineComponent } from "vue";
export default defineComponent({
    name: "name",
    setup(props, { slots }) {
        
        return () => (
            <div>{
                {
                    default: () => (
                        <span> foo </span>
                    ),
                    title: () => <span> title </span>
                }
            }</div>
        )
    }
})

// OR

import { defineComponent } from "vue";
export default defineComponent({
    name: "name",
    setup(props, { slots }) {
        const slots = {
            default: () => (
                <span> foo </span>
            ),
            title: () => <span> title </span>
        }
        return () => (
            <div v-slots={slots}></div>
        )
    }
})
Copy the code

⭐ source address: github.com/Denny-di/vi…

If you have any questions, please comment