当前位置：首页 > article >正文

Vue 3 和 Vite 从零开始搭建项目的详细步骤

article 2025/2/22 15:59:32

以下是使用 Vue 3 和 Vite 从零开始搭建项目的详细步骤：

一、环境准备

安装 Node.js (建议 v16+)
- 官网下载: https://nodejs.org
- 验证安装：
  
  bash
  
  复制
```
node -v
npm -v
```

二、创建 Vite 项目

使用命令行创建项目

bash

复制
```
npm create vite@latest
```
按提示操作：
- 项目名称：输入你的项目名（如 vue3-demo）
- 选择框架：Vue
- 选择变体：TypeScript 或 JavaScript（按需选择）
进入项目目录并安装依赖：

bash

复制
```
cd vue3-demo
npm install
```

三、项目结构说明

复制

├── node_modules/
├── public/            # 静态资源
├── src/
│   ├── assets/        # 图片、字体等资源
│   ├── components/     # Vue 组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── index.html         # 主页面
├── vite.config.js     # Vite 配置
├── package.json

四、启动开发服务器

bash

复制

npm run dev

访问 http://localhost:5173 查看效果

五、开发 Vue 组件

创建组件 src/components/HelloWorld.vue

vue

复制

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  msg: String
});

const count = ref(0);
</script>

在 App.vue 中使用组件

vue

复制

<template>
  <HelloWorld msg="Welcome to Vue 3 + Vite!" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

六、添加 Vue Router

安装路由：

bash

复制
```
npm install vue-router@4
```

创建路由配置文件 src/router/index.js：

复制

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
];

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

export default router;

在 main.js 中挂载路由：

复制

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

const app = createApp(App);
app.use(router);
app.mount('#app');

七、状态管理 (Pinia)

安装 Pinia：

bash

复制
```
npm install pinia
```

创建 Store src/stores/counter.js：

复制

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

在组件中使用：

vue

复制

<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>

<template>
  <button @click="counter.increment">{{ counter.count }}</button>
</template>

八、构建与部署

生产环境构建：

bash

复制
```
npm run build
```
生成的文件位于 dist/ 目录
本地预览生产版本：

bash

复制
```
npm run preview
```
部署到服务器：
- 将 dist 目录上传至静态服务器（如 Nginx、Netlify、Vercel 等）

九、配置 Vite (可选)

修改 vite.config.js：

复制

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  base: '/your-subpath/', // 部署到子路径时配置
  server: {
    port: 3000, // 自定义端口
  }
});