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)