返回

巧用Vue3+Vite，构建前端项目的基础模板

前端

序言

在前端开发领域，Vue3和Vite可谓如日中天。Vue3凭借其丰富的特性和强大的功能，成为众多开发者的不二之选。而Vite，作为一款轻量级且高性能的构建工具，也备受青睐。将Vue3与Vite相结合，可以打造出高效且易于维护的前端项目。

本文将带领你一步步搭建一个基础的Vue3+Vite系统模板，并分享我在搭建过程中踩过的几个坑。如果你是一位前端新手，或者正在寻找一种快速搭建项目的方法，那么本文将为你提供有益的指导。

环境准备

在开始搭建项目模板之前，我们需要准备以下环境：

  • Node.js 16+
  • Vue CLI 4+
  • Vite 2+
  • 编辑器（如Visual Studio Code）

搭建项目

首先，使用Vue CLI创建一个新的Vue3项目：

vue create vite-vue3-template

选择你喜欢的项目功能（例如，是否需要使用TypeScript），然后等待项目创建完成。

项目创建完成后，进入项目目录并安装Vite：

cd vite-vue3-template
npm install --save-dev vite

接下来，在项目目录的package.json文件中添加以下配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^2.x.x"
  }
}

基础页面

现在，让我们开始构建基础页面。首先，在src目录下创建pages目录，然后在其中创建Home.vue文件，作为我们的主页：

<template>
  <div>
    <h1>主页</h1>
    <p>欢迎来到我的网站！</p>
  </div>
</template>

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

接着，在src目录下创建router目录，然后在其中创建index.js文件，作为我们的路由配置：

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

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

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

export default router

最后，在src目录下创建main.js文件，作为我们的入口文件：

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

const app = createApp({})

app.use(router)

app.mount('#app')

现在，你可以通过运行npm run dev命令启动项目，然后访问http://localhost:3000来查看主页。

踩过的坑

在搭建项目模板的过程中，我遇到了一些坑，在这里分享给大家，希望能够帮助你避免这些问题：

  • 在安装Vite时，不要忘记将它添加到package.json文件的devDependencies中，否则Vite不会被安装。
  • 在创建路由配置时，不要忘记在routes数组中添加路由对象，否则路由将无法正常工作。
  • 在创建入口文件时，不要忘记使用app.use(router)来使用路由，否则路由将无法正常工作。

结语

通过本文，我们已经成功搭建了一个基础的Vue3+Vite系统模板。如果你想进一步完善这个模板，可以添加更多页面、组件和功能。希望本文能够为你带来帮助，祝你在前端开发的道路上取得更大的进步！