采用 vite 作为前端项目的打包，构建工具

npm init vite@latest
复制

按提示操作

cd 项目目录
npm install
npm run dev
复制

补充说明：

• npm init vite@latest：使用vite进行项目的初始化，不仅仅支持Vue3还支持其他的语言如React，使用它来初始化配置很少很快
  • 其实还可以使用npm init vue@latest,这依旧是使用vite来构建Vue3项目但是它是为Vue量身订造，在初始化的时候我们可以很方便的勾选导入常用的依赖包
• 每一个初始化后的前端项目或者从GitHub拉取下来的项目都需要先执行npm install完成项目的初始化（其实就是按照package.json中的配置进行初始化引入相关的依赖包）
• npm run dev执行package.json中定义的脚本中对应的dev命令，其实一般默认就是开发调试模式启动项目；当项目完成后我们一般执行npm run build命令
• 初始化和启动项目后如果我们想要引入一些新的技术和三方库，我们需要手动执行npm install 具体的库和版本，之后就能在项目中导入、注册和使用这些技术

推荐采用微软的 VSCode 作为开发工具，到它的官网 Visual Studio Code - Code Editing. Redefined 下载安装即可

要对.vue做语法支持，还要安装一个 Volar 插件

devtools 插件网址：https://devtools.vuejs.org/guide/installation.html
这是一款浏览器插件，方便在浏览器调试Vue程序

打开项目根目录下 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7070
  }
})
复制

文档地址：配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理，同样是修改项目根目录下 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})
复制

文档地址：配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

index.html
package.json
tsconfig.json
vite.config.ts
├─public
└─src
    ├─assets
    ├─components
    ├─model
    ├─router
    ├─store
    └─views
复制

• index.html 为主页面
• package.json npm 配置文件
• tsconfig.json typescript 配置文件
• vite.config.ts vite 配置文件
• public 静态资源
• src/components 可重用组件
• src/model 模型定义
• src/router 路由
• src/store 共享存储
• src/views 视图组件