天天看点
返回

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

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

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

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

本文将介绍以下内容：

1.创建项目

2.项目配置

3.安装和配置路由

4.介绍 Element Plus

创建项目

  1. 要使用 Vite 创建一个新项目:
Vue3项目实践-第四篇（项目配置与安装）
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
  1. 安装项目依赖： 
npm install
  1. 运行项目： 
npm run dev

项目配置

Vite 官方文档：https://vitejs.dev/config/
Vue3项目实践-第四篇（项目配置与安装）

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

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    host: '127.0.0.1', // 设置服务器主机，默认为 127.0.0.1\localhost
    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 Router 是 Vue.js 官方的路由管理器，它允许您在单页应用程序中实现导航和路由功能。

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

  • 安装 Vue Router。运行以下命令进行安装： 
npm install vue-router
  • 在您的项目中创建一个新的文件夹，用于存放路由相关的代码。例如，您可以在项目根目录下创建一个名为 router 的文件夹。
  • 在 router 文件夹中创建一个新的 JavaScript 文件，例如 index.js，用于配置和创建路由实例。在该文件中，您需要导入 Vue 和 Vue Router，并创建一个新的路由实例。 
// router/index.js
import { 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> 来实现路由导航和显示组件的功能。 
<!-- App.vue-->
<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项目实践-第四篇（项目配置与安装）

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

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

  • 安装 Element Plus：使用 npm 或 yarn 进行安装。 
# 使用 npm
npm install element-plus

# 使用 yarn
yarn 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>
        <!-- 其他 Element Plus 组件 -->

    </div>
</template>
<script lang="ts" setup>
</script>

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

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

项目配置 项目实践 配置
上一篇: 关于删除流氓bpsvc进程
下一篇: FSCapture录屏软件

继续阅读