安装配置vue3+vite-Toy模板网

这篇具有很好参考价值的文章主要介绍了安装配置vue3+vite。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、安装

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

安装 18.0 或更高版本的 Node.js

查看Node版本显示版本号安装成功

node -v

2、安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm版本显示版本号安装成功

cnpm -v

3、打开命令行或终端，运行以下命令来全局安装 Vue和Vite：

cnpm install vue@next

cnpm install -g create-vite

安装成功后使用 npm list vue来检查vue版本号

4、创建一个新项目。在命令行中运行以下命令，将 "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 项目，我们需要考虑以下几个方面：

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

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

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 文件示例：文章来源地址https://www.toymoban.com/news/detail-716983.html

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" 文件中进行自定义配置。

到了这里，关于安装配置vue3+vite的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

安装配置vue3+vite