Install create-viet-app globally

yarn global add create-vite-app /OR/ npm install -g create-vite-app
Copy the code

Create a project directory

cva vue3-ui  /or/  create-vite-app vue3-ui
cd vue3-ui
npm install (or `yarn`)
npm run dev (or `yarn dev`)
Copy the code

Visit http://localhost:3000/

See the differences with Vue 2 in Migration Guide

Vite configuration

The root directory creates the vite. Config. ts file

Basic Project Configuration

eslint-plugin-vue

yarn add -D eslint eslint-plugin-vue 
Copy the code

The root directory creates.eslintrc.js

Join the TypeScript

yarn add -D typescript
Copy the code

Join the Vue Router

yarn add vue-router@next
Copy the code

Join Vuex

yarn add vuex@next
Copy the code

Join Ant Design Vue

yarn add ant-design-vue@next
yarn add -D babel-plugin-import
yarn add @ant-design/colors
Copy the code

Create the babelrc

At this point, the project is created

Begin to use

Use the TypeScript

  • Rename main.js to main.ts

  • / SRC /main.js instead of/SRC /main.ts in index.html

Using the Vue Router

Using Vuex

Change the main ts

Configuration tsconfig. Json

New types to resolve ts import module error

The relevant codes are as follows

Project code addressGithub.com/fushichang/…

At this point a simple vue+VueRouter+Vuex+AntDesignVue Vite project is complete

Running effect drawing

reference

  • Vue 3 – Docs
  • Ant Design Vue – Docs
  • Vue Vben Admin
  • Deploying a subfolder to GitHub Pages
  • How does VUE3 create a project in Vite

————————————————————————————————

Students are welcome to discuss and correct their research

O O (studying studying)