Vue3项目极速搭建：一套方案搞定！

使用 Vite + PNPM + ESLint + Prettier 搭建企业级 Vue.js 3 项目

1. 项目创建

我们首先需要使用 Vite 创建一个新的 Vue.js 3 项目。使用以下命令：

pnpm create vite-vue3-project

2. 安装依赖

接下来，安装项目所需的依赖项：

pnpm install

3. 项目配置

修改 package.json 文件以配置项目：

{
  "name": "vite-vue3-project",
  "version": "1.0.0",
  "description": "A Vue3 project",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.2.35",
    "vite": "^3.2.4"
  },
  "devDependencies": {
    "eslint": "^8.19.0",
    "prettier": "^2.7.1",
    "husky": "^8.0.1",
    "commitlint": "^17.0.3"
  }
}

4. 添加代码检查和格式化

使用 ESLint 和 Prettier 添加代码检查和格式化：

pnpm install eslint prettier --save-dev

5. 添加提交规范

使用 Husky 和 Commitlint 添加提交规范：

pnpm install husky commitlint --save-dev

6. 运行项目

在配置好项目后，运行项目：

pnpm dev

7. 部署项目

在开发完项目后，部署项目：

pnpm build

8. 代码示例

在 main.js 文件中，添加以下代码以创建 Vue 实例：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

在 App.vue 文件中，添加以下代码以创建根组件：

<template>
  <div>
    <h1>Hello, Vue.js 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

常见问题解答

• 如何安装 Vite？
  使用 npm install -g vite 或 pnpm install -g vite 安装 Vite。

• 如何使用 ESLint？
  创建 .eslintrc.js 文件，配置 ESLint 规则。

• 如何使用 Prettier？
  创建 .prettierrc 文件，配置 Prettier 规则。

• 如何使用 Husky 和 Commitlint？
  创建 .huskyrc.js 和 .commitlintrc.js 文件，配置 Husky 和 Commitlint。

• 如何部署 Vue.js 项目？
  使用 vite build 构建项目，然后根据部署平台的说明进行部署。