Vue3 study notes
Create the project using the vue command
vue create project name
Copy the codeSelect the VUE version
Manually select feature, and then a random selection is done
Add the Vite packaging tool
Add vite package
You need to add the following three
"Vite" : "^ 2.0.1" "@ vue/compiler - the SFC" : "^ 3.0.5" "@ vitejs/plugin - vue" : "^ 1.1.4." "Copy the codeAdd the vite. Config. j file
Add the vite. Config. js file to the root directory of the project.
import path from "path"; import vue from "@vitejs/plugin-vue"; Export default {// Configuration options // Import alias plugins: [vue()], resolve: {alias: {"@": path.resolve(__dirname, "./src") } }, server: { // hmr: { overlay: false } } };Copy the codeChange the package. The json
Add the following:
"scripts": {
"dev": "vite",
},
Copy the codeAdd index. HTML
If you add the index.html file to the project root directory, vite will load the index.html file in the root directory by default
Index.html content
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Vite App</title> </head> <body> <div id=" App "></div> <script type="module" src="/src/main.ts"></script> </body> </html>Copy the coderun
Run with Yarn Dev and you’re done.
yarn dev
Copy the code