Vue3 provides syntax hint function plug-in – Volar

  • VSCode + Volar

How to use Vite to build a VUE project

  1. Install vite
NPM init vite@latest NPM Build a Vite project YARN Create Vite Yarn build a Vite projectCopy the code

You need to configure the project name, framework selection, native and TS version selection in turn

  1. Run the Vite + Vue project

CD vue3 The created project package is displayed

NPM I/YARN Dependencies required to download the project

NPM run dev/yarn dev Runs the project

To this vite + Vue project the most basic framework has been built

3. Install VueRouter

NPM install [email protected]Copy the code

Create the SRC /router/index.ts file and configure routes

Import {createRouter, createWebHashHistory} from 'vue-router' export default createRouter({// specify route mode history: CreateWebHashHistory (), // routes: []})Copy the code

4. Install vuex

NPM install [email protected] yarn add [email protected]Copy the code

Create SRC /store/index.ts and configure vuex

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'vueX'
  }
})
Copy the code

5. In main.ts, configure router and store

Import {createApp} from 'vue' import App from './ app. vue' // Import router and store Import Router from './router/index' import  store from './store/index' const app = createApp(App) app.use(router) app.use(store) app.mount('#app')Copy the code

To this a basic vite + vue3 + TS + VueRouter + VueX front-end project framework is built

The recommended backend framework is Ant

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

Configure Ant in main.ts

Import {createApp} from 'vue' import App from './ app. vue' // Import router and store Import Router from './router/index' import Store from './store/index' // Import Ant components and styles import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' Const app = createApp(app) app.use(router) app.use(store) // Mount Ant app.use(Antd) app.mount('#app')Copy the code