安装配置vue3+vite全过程

一、安装

确保你已经安装了 Node.js

访问https://nodejs.org/以获取最新版本的 Node.js，推荐安装 LTS 版本。

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

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

node -v

安装淘宝镜像

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

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

cnpm -v

打开命令行或终端

运行以下命令来全局安装 Vue和Vite：

cnpm install vue -g

cnpm install -g create-vite

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

创建一个新项目

在命令行中运行以下命令，将 "my-vue3-vite-project" 替换为你想要的项目名称：

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

切换到项目目录

cd my-vue3-vite-project

安装项目依赖

cnpm install

运行开发服务器

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.路由和权限管理

1. 安装Vue Router

cnpm install vue-router@next

2. 配置Vue Router

在src目录下创建一个名为router的新文件夹，并在其中创建一个index.js文件。

在index.js中，您可以添加如下代码来配置Vue Router：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 创建页面组件

在src/views目录下，创建文件 Home.vue： 

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home Page!</p>
  </div>
</template>

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

4. 在主应用文件中使用Vue Router

在src/main.js文件中，您需要导入并使用上面创建的路由器：

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

const app = createApp(App);

app.use(router);

app.mount('#app');

5.修改App.vue

以使用<router-view>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
/* 在这里添加样式 */
</style>

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

6. VueX安装和配置

6.1.安装Vuex

在您的项目目录下，使用以下命令来安装Vuex：

cnpm install vuex@next

6.2. 配置Vuex

在src目录下创建一个名为store的新文件夹，并在其中创建一个index.js文件。

在index.js中，您可以添加如下代码来配置基础的Vuex store：

import { createStore } from 'vuex';

export default createStore({
  state: {
    // 在这里定义您的状态
  },
  mutations: {
    // 在这里定义您的变更函数
  },
  actions: {
    // 在这里定义您的操作
  },
  modules: {
    // 在这里定义您的子模块
  }
});

6.3. 在主应用文件中使用Vuex

在src目录下的main.js文件中，您需要导入并使用上面创建的Vuex store：

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

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

7.组件和样式库

选择一个合适的组件库，如 Element Plus、Ant Design Vue 或 Vuetify。

按照官方文档安装和配置该组件库。同时，考虑将常用的自定义组件放在 "src/components" 目录中。

8.优化和打包

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论