安装配置vue3+vite

一、安装

1.确保你已经安装了 Node.js。访问 https://nodejs.org/ 以获取最新版本的 Node.js，推荐安装 LTS 版本。

2.打开命令行或终端，运行以下命令来全局安装 Vite：

cnpm install -g create-vite

3.创建一个新项目。在命令行中运行以下命令，将 "my-vue3-vite-project" 替换为你想要的项目名称：

create-vite my-vue3-vite-project --template vue

4.切换到项目目录：

cd my-vue3-vite-project

5.安装项目依赖：

cnpm install

6.运行开发服务器：

npm run dev

现在，已经成功创建了一个 Vue 3 和 Vite 的项目。浏览器会自动打开

二、配置

为了按照企业级项目的标准配置 Vue 3 和 Vite 项目，我们需要考虑以下几个方面：

1. 目录结构
2. 代码规范和风格
3. 环境变量和配置
4. API 请求封装
5. 路由和权限管理
6. 组件和样式库
7. 优化和打包

以下是针对这些方面的一些建议和配置：

1.目录结构

my-vue3-vite-project
├─ public
└─ src
   ├─ api
   ├─ assets
   │  ├─ images
   │  └─ styles
   ├─ components
   ├─ layout
   ├─ router
   ├─ store
   │  ├─ modules
   │  └─ index.js
   ├─ utils
   ├─ views
   └─ main.js

2.代码规范和风格

为了确保团队中的每个成员都能遵循相同的代码规范和风格，推荐使用 ESLint 和 Prettier。首先安装所需依赖：

cnpm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier

在项目根目录创建 ".eslintrc.js" 和 ".prettierrc" 文件，分别配置 ESLint 和 Prettier。

.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/prettier",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

**.prettierrc： **

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

3.环境变量和配置

在项目根目录创建 ".env"、".env.development" 和 ".env.production" 文件，分别配置通用、开发和生产环境的变量。Vite 会自动加载这些环境变量。

.env.development 文件示例：

VITE_API_BASE_URL=http://localhost:3000/api

.env.production 文件示例：

VITE_API_BASE_URL=https://api.example.com

4.API 请求封装

在 "src/api" 目录中创建一个 API 请求库，例如使用 Axios。首先安装 Axios：

cnpm install axios

然后在 "src/api" 目录下创建一个封装 Axios 的文件，如 "request.js

5.路由和权限管理

在 "src/router" 目录中创建一个权限管理文件，如 "permission.js"，用于处理路由守卫和用户权限。导入该文件到 "src/main.js" 中

6.组件和样式库

选择一个合适的组件库，如 Element Plus、Ant Design Vue 或 Vuetify。按照官方文档安装和配置该组件库。同时，考虑将常用的自定义组件放在 "src/components" 目录中。

7.优化和打包

Vite 提供了很好的默认优化和打包配置。如有需要，可以在 "vite.config.js" 文件中进行自定义配置。