安装配置vue3+vite

懒员员

已于 2024-03-31 15:47:45 修改

阅读量1.1w

点赞数 28

分类专栏： vue 文章标签： vue.js 前端 typescript

于 2023-04-24 17:12:43 首次发布

本文链接：https://blog.csdn.net/weixin_44523517/article/details/130336959

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一、安装

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 文件示例：

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安装和配置

1.安装Vuex

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

cnpm install vuex@next

2. 配置Vuex：

在src目录下创建一个名为store的新文件夹，并在其中创建一个index.js文件。
在index.js中，您可以添加如下代码来配置基础的Vuex store：

import { createStore } from 'vuex';

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

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');