青岛建设教育网站/哪有免费的网站

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

---

一、环境准备

1. 安装 Node.js (建议 v16+)

   • 官网下载: https://nodejs.org

   • 验证安装：

     bash

     复制

     node -v
     npm -v

---

二、创建 Vite 项目

1. 使用命令行创建项目

   bash

   复制

   npm create vite@latest

2. 按提示操作：

   • 项目名称：输入你的项目名（如 vue3-demo）

   • 选择框架：Vue

   • 选择变体：TypeScript 或 JavaScript（按需选择）

3. 进入项目目录并安装依赖：

   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 组件

1. 创建组件 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>

2. 在 App.vue 中使用组件

   vue

   复制

   <template><HelloWorld msg="Welcome to Vue 3 + Vite!" />
   </template><script setup>
   import HelloWorld from './components/HelloWorld.vue';
   </script>

---

六、添加 Vue Router

1. 安装路由：

   bash

   复制

   npm install vue-router@4

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

   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;

3. 在 main.js 中挂载路由：

   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)

1. 安装 Pinia：

   bash

   复制

   npm install pinia

2. 创建 Store src/stores/counter.js：

   js

   复制

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

3. 在组件中使用：

   vue

   复制

   <script setup>
   import { useCounterStore } from '@/stores/counter';
   const counter = useCounterStore();
   </script><template><button @click="counter.increment">{{ counter.count }}</button>
   </template>

---

八、构建与部署

1. 生产环境构建：

   bash

   复制

   npm run build

   生成的文件位于 dist/ 目录

2. 本地预览生产版本：

   bash

   复制

   npm run preview

3. 部署到服务器：

   • 将 dist 目录上传至静态服务器（如 Nginx、Netlify、Vercel 等）

---

九、配置 Vite (可选)

修改 vite.config.js：

js

复制

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

---

十、常用插件推荐

1. UI 框架：

   • Element Plus：npm install element-plus

   • Vant：npm install vant

2. HTTP 请求：

   • Axios：npm install axios

3. 代码规范：

   • ESLint + Prettier