手把手完成前端Vue3 + Vite项目工程化搭建
在当前前端开发中，Vue.js 是一个备受欢迎的框架，而 Vite 则是一个现代化的构建工具，具有快速启动和热重载等特点。接下来，我将手把手教你如何使用 Vue 3 和 Vite 搭建一个基本的工程化项目。
1. 环境准备
在开始之前，请确保你已经安装了 Node.js。如果你没有安装，可以去 Node.js 官网 下载并安装最新的稳定版本。
2. 创建 Vue 3 + Vite 项目
打开终端，使用以下命令创建一个新的 Vue 3 项目：
npm create vite@latest my-vue-app -- --template vue
这里 my-vue-app 是你的项目名称，你可以根据需要修改。执行该命令后，会自动生成一个包含 Vue 3 和 Vite 模板的项目结构。
3. 安装依赖
进入项目目录后，使用 npm 安装所需的依赖：
cd my-vue-app
npm install
4. 启动开发服务器
完成依赖安装后，可以启动开发服务器：
npm run dev
打开浏览器，访问 http://localhost:5173，你应该可以看到默认的 Vue 页面。
5. 项目结构分析
此时，我们可以简单看看项目的结构：
my-vue-app
├── index.html
├── package.json
├── vite.config.js
└── src
├── assets
├── components
├── App.vue
└── main.js
index.html是入口文件。src文件夹包含了 Vue 组件、资产等文件。vite.config.js是 Vite 的配置文件。
6. 创建组件
在 src/components 文件夹中创建一个新组件，例如 HelloWorld.vue：
<template>
<div>
<h1>欢迎来到我的 Vue 3 应用!</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
接下来，在 App.vue 中引用这个新组件：
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
7. 路由设置
如果你的项目需要路由功能，可以安装 vue-router：
npm install vue-router@4
然后在 src 文件夹中创建一个 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
接下来在 main.js 中注册路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
8. 代码规范与工具
为了确保我们的代码结构清晰，建议使用 ESLint 和 Prettier：
npm install --save-dev eslint prettier eslint-plugin-vue
可以使用以下命令进行初始化配置：
npx eslint --init
9. 打包发布
开发完成后，可以使用以下命令进行项目打包：
npm run build
构建完成后，生成的文件会在 dist 目录下，你可以将其部署到服务器。
总结
通过上述步骤，我们成功搭建了一个使用 Vue 3 和 Vite 的前端项目，同时也初步了解了组件创建、路由设置以及代码规范。随着项目的深入，你可以进一步探索 Vite 的其他特性，例如插件系统和环境变量等。希望这篇文章能对你有所帮助，祝你在前端开发的道路上越走越远！
