The npm method is used here
npm install cnpm -g
npm init vue@latest//通过左右键选择是否启用ts等
cd vlue-project
npm install
npm run dev
image.png
actual code structure
image.png
index.html
<!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>
image.png
image.png
vscode running and debugging
Select main.ts
and click Run
image.png
Choose node.js
image.png
will run automatically
image.png
After modifying the code, the discovery will automatically change.
Or without selecting any files, select run node.js, and then you will be prompted to run dev .
Be sure to do it first
npm instlal
. Refer to https://www.runoob.com/vue3/vue3-create-project.html
Fixed port
in vite.config.ts
/// <reference types="vitest" />
import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
server: {
port: 3333,
},
preview: {
port: 3333
},or in package.json
"scripts": {
"serve": "vite preview --port 6000"
},Port reference https://blog.csdn.net/Jeasu_0908/article/details/122583100 https://blog.51cto.com/u_15155073/2691729 https://blog.csdn.net/zhangxueyou2223/article/details/131450798 https ://www.51c51.com/danpianji/xinxi/84/554215.html