Vite 官方文档：https://vitejs.dev/

element-plus 官方文档：https://element-plus.org

Vue3项目实践-第四篇（项目配置与安装）（vue项目搭建配置）

本文将介绍以下内容：

1.创建项目

2.项目配置

3.安装和配置路由

4.介绍 Element Plus

创建项目

要使用 Vite 创建一个新项目:

Vue3项目实践-第四篇（项目配置与安装）（vue项目搭建配置）

npm init vite@latest my-project --template [template-name]

请将 [template-name] 替换为您想要使用的模板名称。Vite 提供了几个预定义的模板可供选择，例如：

vanilla: 一个简单的 JavaScript 项目模板。
vue: 一个使用 Vue.js 的项目模板。
react: 一个使用 React 的项目模板。
preact: 一个使用 Preact 的项目模板。
lit: 一个使用 Lit 框架的项目模板。
以下是使用 Vue 模板创建项目的示例：

npm init vite@latest my-project --template vue

安装项目依赖：

npm install

运行项目：

npm run dev

项目配置

Vite 官方文档：https://vitejs.dev/config/

Vue3项目实践-第四篇（项目配置与安装）（vue项目搭建配置）

在 Vite 中，vite.config.ts 是用于配置项目的配置文件。您可以在该文件中配置服务器选项，包括主机、端口、代理等。以下是一个示例的 vite.config.ts 文件，展示了如何配置服务器：

import { defineConfig } from 'vite';export default defineConfig({ server: { host: '127.0.0.1', // 设置服务器主机，默认为 127.0.0.1localhost port: 3000, // 设置服务器端口，默认为 3000 open: true, // 自动打开浏览器，默认为 false proxy: { '/api': { target: 'https://api.example.com', // 设置代理目标地址 changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ''), // 重写请求路径，去掉 '/api' 前缀 }, }, },});

在这个示例中，我们使用 defineConfig 函数来定义配置对象。其中 server 是一个子对象，用于配置服务器选项。

host：指定服务器主机，默认为 '127.0.0.1 或 localhost'。
port：指定服务器端口，默认为 3000。
open：设置为 true 时，启动服务器后会自动在浏览器中打开项目，默认为 false。
proxy：用于配置代理选项，可以将某些请求转发到其他服务器。在这个示例中，我们将以 /api 开头的请求转发到 https://api.example.com。changeOrigin 选项设置为 true 以确保请求头中的 Host 字段被设置为代理目标地址。rewrite 函数用于重写请求路径，将 /api 前缀去掉，以便正确匹配代理请求。

您可以根据需要修改 vite.config.ts 文件中的服务器配置，以满足您的项目需求。更多关于 Vite 的配置选项，请参考 Vite 官方文档。

安装和配置路由

官方文档：https://router.vuejs.org/

Vue3项目实践-第四篇（项目配置与安装）（vue项目搭建配置）

Vue Router 是 Vue.js 官方的路由管理器，它允许您在单页应用程序中实现导航和路由功能。

以下是在 Vite 中安装和配置 Vue router 的步骤：

安装 Vue Router。运行以下命令进行安装：

npm install vue-Router

在您的项目中创建一个新的文件夹，用于存放路由相关的代码。例如，您可以在项目根目录下创建一个名为 router 的文件夹。
在 router 文件夹中创建一个新的 JavaScript 文件，例如 index.js，用于配置和创建路由实例。在该文件中，您需要导入 Vue 和 Vue Router，并创建一个新的路由实例。

// router/index.jsimport { createRouter, createWebHistory } from "vue-router";const routes = [ { path: "/", component: () => import("../src/views/Home.vue"), }, { path: "/about", component: () => import("../src/views/About.vue"), },];const router = createRouter({ history: createWebHistory(), routes: routes,});export default router;

在上面的示例中，我们创建了两个路由：/ 对应的组件是 Home，/about 对应的组件是 About。

在您的主入口文件（通常是 main.js）中，导入路由实例并将其挂载到 Vue 应用中。

import { createApp } from 'vue'import './style.css'import App from './App.vue'import router from '../router';createApp(App).use(router).mount('#app')

在上面的示例中，我们将路由实例通过 .use(router) 方法挂载到 Vue 应用中。

最后，在您的组件中可以使用 <router-link> 和 <router-view> 来实现路由导航和显示组件的功能。

<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div></template><script setup lang="ts"></script>

现在，您已经成功安装并配置了 Vue Router。您可以根据需要在 router/index.js 文件中定义更多的路由规则，并在组件中使用 <router-link> 和 <router-view> 实现导航和路由功能。

请注意，以上是一个基本的 Vue Router 配置示例。在实际应用中，您可能需要处理更复杂的路由情况，例如路由参数、嵌套路由等。

介绍 Element Plus

官方文档：https://element-plus.org

Vue3项目实践-第四篇（项目配置与安装）（vue项目搭建配置）

Element Plus 是一套基于 Vue.js 的开源 UI 组件库，用于构建 Web 应用程序的用户界面。它是对原始 Element UI 组件库的升级和改进，提供了一系列功能强大、易于使用的 UI 组件，帮助开发者快速构建美观、响应式的界面。

以下是使用 Element Plus 的基本步骤：

安装 Element Plus：使用 npm 或 yarn 进行安装。

# 使用 npmnpm install element-plus# 使用 yarnyarn add element-plus

引入 Element Plus：在您的项目入口文件（通常是 main.js）中，导入 Element Plus 的样式和组件。

import { createApp } from "vue";// import './style.css'import ElementPlus from "element-plus";import "element-plus/dist/index.css";import App from "./App.vue";import router from "../router";createApp(App).use(ElementPlus).use(router).mount("#app");

在上面的示例中，我们首先导入 Element Plus 的样式文件 element-plus/dist/index.css，然后通过 app.use(ElementPlus) 将 Element Plus 注册到 Vue 应用中。

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 的配置文件中

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }) ], // 开发服务器选项 server:{ host:"127.0.0.1", port:5000, open:false }})

请参考 : unplugin-vue-components 和 unplugin-auto-import。

使用 Element Plus 组件：在您的 Vue 组件中，您可以直接使用 Element Plus 的各种组件。

<template> <h1>Home</h1> <div> <el-button type="primary">Primary Button</el-button>  </div></template><script lang="ts" setup></script>

在上面的示例中，我们使用了 Element Plus 的 el-button 组件。您可以根据需要使用 Element Plus 的其他组件，比如表单、表格、弹框、导航等。

请注意，Element Plus 提供了丰富的组件和功能，您可以根据项目需要选择合适的组件进行使用。