基于Vite搭建Vue3.0 + Element-Plus + Vue-Router完整开发环境指南

2023-11-27 08:12:13

使用 Vite、Vue 3、Element Plus 构建现代前端开发环境

构建高效灵活的前端开发环境对于项目开发至关重要。本文将引导您从头开始构建一个由 Vite、Vue 3、Element Plus、Vue Router、ESLint、husky 和 lint-staged 组成的完整开发环境。该环境的特点包括：

快速构建和热更新（Vite）
强大的响应式系统和简洁语法（Vue 3）
丰富的组件和美观样式（Element Plus）
单页面应用路由管理（Vue Router）
确保代码规范（ESLint）
防止不符合规范的代码提交（husky 和 lint-staged）

安装和配置开发环境

安装 Node.js： 这是 Vite 和 Vue 3 的运行时环境。
安装 Vite： 使用 npm install -g vite 命令全局安装 Vite。
创建项目： 使用 vite create my-project 初始化一个新的 Vite 项目。
安装 Vue 3： 使用 npm install vue@next 安装 Vue 3。
安装 Element Plus： 使用 npm install element-plus 安装 Element Plus。
安装 Vue Router： 使用 npm install vue-router 安装 Vue Router。
安装 ESLint： 使用 npm install eslint 安装 ESLint。
安装 husky 和 lint-staged： 使用 npm install husky lint-staged 安装 husky 和 lint-staged。
配置 package.json： 在 package.json 中添加依赖项和脚本。

代码示例：

创建组件（HelloWorld.vue）：

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

创建路由（router/index.js）：

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

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

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

export default router

使用组件和路由（App.vue）：

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import { createApp } from 'vue'
import router from './router'

const app = createApp({})

app.use(router)

app.mount('#app')
</script>