vue3的H5项目从0到1工程化落地经验，全系列太长，建议收藏

这次的项目经验本来想写成一篇，奈何太长，于是写成一个系列了。其他系列的链接以后也会更新到这篇，敬请期待。

vite初始化vue3全家桶项目

官网：vite，目前最新的vite版本是v6,在此我们使用的也是vite v6.他的优点是1、任何配置修改后不需要重启直接就能看到效果；2、代码写了后非常快速就能更新预览；3、如果写错了还有非常人性化的控制台报错。使用下来我觉得主要是这几点好处，比起webpack的超慢更新，改点代码等个十几秒，动不动得重启，我已经非常满意这个体验了。

下边我们使用vite工具安装vue3全家桶：

npm create vite@latest
1、输入项目名
2、选择vue框架
3、选variant这一步选择vue official,如下图

接下来就能选全家桶的内容了：

1、现在有了Typescript,可选可不选，不选就是Javascript，有人放弃为了TS而TS，我觉得可以理解。看个人选择。

2、JSX一般也用不到，也可以不选

3、router这个必然得选，哪个项目能没有路由呢？

4、pinia，大家类比vue2的vuex即可，都是管理全局数据的

5、vitest可以不选

6、端到端测试，一般前端也用不到，可以不选

7、ESLint必然得选

8、prettier当然也得选，不然就得看乱糟糟的代码了

所有步骤都运行完如下：

运行起来后大家就能看到效果了，这个没难度，也太常见了，我就不贴图了。

能看到此时的package.json就有相关的包了：

{
  "dependencies": {
    "pinia": "^3.0.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.22.0",
    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/eslint-config-prettier": "^10.2.0",
    "eslint": "^9.22.0",
    "eslint-plugin-oxlint": "^0.16.0",
    "eslint-plugin-vue": "~10.0.0",
    "globals": "^16.0.0",
    "npm-run-all2": "^7.0.2",
    "oxlint": "^0.16.0",
    "prettier": "3.5.3",
    "vite": "^6.2.4",
    "vite-plugin-vue-devtools": "^7.7.2"
  }
}

很多文件夹不用手动创建就创建好了，我个人认为这是一个很好用的模板了。 我个人在此基础上完善了一些公共方法，axios、环境变量等等，大家也可以直接下载使用。

vue3+vite6+js+vue-router4项目template：开箱即用，让你只需要写页面，目前前端常用的配置都已配置完善。

起别名@

在vite.config.js文件中 :最常用的就是下边这些，你可以找一些你需要的加上，

import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      components: fileURLToPath(new URL('./src/components', import.meta.url)),
      assets: fileURLToPath(new URL('./src/assets', import.meta.url)),
      views: fileURLToPath(new URL('./src/views', import.meta.url)),
      utils: fileURLToPath(new URL('./src/utils', import.meta.url)),
      router: fileURLToPath(new URL('./src/router', import.meta.url)),
      store: fileURLToPath(new URL('./src/store', import.meta.url)),
      api: fileURLToPath(new URL('./src/api', import.meta.url)),
      layout: fileURLToPath(new URL('./src/layout', import.meta.url)),
      plugins: fileURLToPath(new URL('./src/plugins', import.meta.url)),
      styles: fileURLToPath(new URL('./src/styles', import.meta.url)),
    },
  },
})

加了以后写路径的时候直接用左边的替代.src/xxx，比如引入组件的时候import AudioPlayer from 'components/AudioPlayer.vue'不用再写import Pagination from '../../src/components/Pagination.vue'，这种靠相对路径引入组件或其他资源的时候，如果需要挪位置，每个都去矫正一遍路径，那时候尤其是大型项目，太费力了，这样多好。

清除浏览器默认样式

在前端项目中进行样式重置，目的是消除浏览器默认样式的差异，确保跨浏览器一致性。

对比不同方式：

方案	优点	缺点	适用场景
Normalize.css	轻量、保留语义化样式	不够彻底	快速开发、SEO优化
Reset CSS	彻底重置、高度可控	需额外样式覆盖	传统企业级项目
Bootstrap/Tailwind	框架级解决方案、社区支持强	学习成本较高	响应式项目、现代架构
自定义重置	精准控制、无依赖	维护成本高	中小型项目、特定需求

我选择了tailwind css,因为它除了重置样式，还是目前最流行的，有很多定义好的类名直接就能用，（虽然对我来说是反而还得记一堆新的tailwind类名，毕竟我的css属性几乎已经都会背，但是还是看在它能响应式的份上使用它了，写几个页面其实就掌握的差不多了）。版本呢，使用了目前的最新版本4.x. 最新版本和旧版本的导入方式不同，大家看官方文档就好了。 Installing Tailwind CSS with Vite - Tailwind CSS 简单来说就这三步：

给大家举个例子，在我的项目中：npm install tailwindcss @tailwindcss/vite后需要改如下两个文件

// tailwindcss
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
)}

在自己项目的主样式文件中导入：

/* 导入 Tailwind CSS */
@import 'tailwindcss';

这样重置样式就好了，也可以使用Tailwind CSS自带的那一堆类名了。

同wifi时用手机访问运行的项目

项目运行后直接可以通过localhost访问，但是手机上想要访问的时候，这时就得使用ip了，那么怎样让他运行的时候在手机上访问到呢？ vite创建的项目默认不会打开手机使用ip访问，所以这里提醒了，可以用这个--host去实现。

// 默认是只有vite
"scripts": {
    "dev": "vite",
// 此时加上 --host就会出现本机ip
    "dev": "vite --host",

在手机上访问该ip就可以访问到你的vue项目。 还可以用配置的方式，如下：

export default defineConfig({
    server: {
        host: '0.0.0.0', // 默认自动设置为 '0.0.0.0'，显式声明更清晰
      },
)}

得禁用vetur插件

如果你之前在用vscode写vue2项目，那么写vue3项目的时候就要注意vscode 确保已禁用 Vetur，避免与 Volar 冲突。

它俩大概有以下几点区别：

1. 支持的Vue版本：Vetur主要Vue 2，Volar主要Vue 3。
2. 功能特性：Volar支持更多的Vue 3特性，如组合式API、TypeScript集成更好。
3. 性能优化：Volar更高效，适合大型项目。
4. 项目状态：Volar是Vue 3推荐的工具，而Vetur可能逐渐被取代。
5. 安装和冲突：两者不能同时启用，需根据项目选择。

修改网站标题

网站标题在入口的index.html中修改，修改图中圈出来的两处的图标和网站名即可。

修改前： 修改后：

有人可能会有疑问，用ico格式的logo和png格式的logo有什么不同？用哪个比较好？以下是两者对比：

特性	ICO 格式	PNG 格式
设计目的	专为图标设计（如网站 favicon、应用图标）	通用图像格式（支持透明背景、无损压缩）
多尺寸支持	✅ 可包含多个尺寸（16x16, 32x32 等）	❌ 单图固定尺寸
透明度支持	✅ 支持透明（但兼容性有限）	✅ 完美支持透明背景（Alpha 通道）
文件体积	较大（含多尺寸时）	较小（无损压缩）
兼容性	适用于所有浏览器的 favicon	广泛支持，但某些旧浏览器需额外配置

我觉得除非是希望你的logo是透明背景，否则其他情况下都用 ico 即可。

举个例子：我的图标在无痕模式下的浏览器中希望它可以透出黑色，这种就用 png 。

如果你的网站被应用的比较广泛，可以按照下面几行进行优化：

如果想要适配旧版本浏览器，那就写上这行,shortcut icon是早期规范
<link rel="shortcut icon" href="/logo.ico" type="image/x-icon" />
如果需要适配高分辨率屏幕，比如Retina显示器，那就加个svg格式的，因为现代浏览器支持svg,且文件体积小，清晰度高。
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
所有浏览器都支持的png,作为svg不支持的备选。
<link rel="icon" type="image/png" href="/logo.png" />
设置ios设置将网页添加到主屏幕的图标：
<link rel="apple-touch-icon" href="/logo.png" />

ios的添加到主屏幕这里可能很多人没验证过，这里给各位举个例子： 如果没设置apple-touch-icon，那么在手机屏幕上长这样：

如果设置了：添加到主屏幕时就会出现你设置的图标 添加完成后：

内容太长，请看下一篇，各位看官大老爷，觉得满意就给个点赞❤。不满意就请在评论里发表意见。交流才能才来进步，感谢各位不吝赐教。