vue项目实现

Vue 项目实现指南

环境准备

确保已安装 Node.js（建议版本 14+）和 npm/yarn。Vue 官方推荐使用 Vue CLI 或 Vite 快速搭建项目。
安装 Vue CLI：

npm install -g @vue/cli

创建项目：

vue create my-project

或使用 Vite：

npm create vite@latest my-project --template vue

项目结构

典型 Vue 项目结构如下：

my-project/
├── public/          # 静态资源
├── src/
│   ├── assets/      # 模块资源（如图片）
│   ├── components/  # 可复用组件
│   ├── views/       # 页面级组件
│   ├── router/      # 路由配置
│   ├── store/       # Vuex/Pinia 状态管理
│   ├── App.vue      # 根组件
│   └── main.js      # 入口文件
├── package.json
└── vite.config.js   # 或 vue.config.js

核心功能实现

组件开发
单文件组件（.vue）示例：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello Vue!' };
  }
};
</script>

<style scoped>
div { color: red; }
</style>

路由配置
安装 Vue Router：

npm install vue-router

配置示例（src/router/index.js）：

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

const routes = [{ path: '/', component: Home }];
const router = createRouter({ history: createWebHistory(), routes });
export default router;

状态管理（Pinia 示例）
安装 Pinia：

npm install pinia

创建 Store（src/store/counter.js）：

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

构建与部署

开发模式运行：

npm run dev

生产构建：

npm run build

输出文件位于 dist/ 目录，可部署到静态服务器（如 Nginx、Netlify）。

进阶优化

• 性能：使用异步组件、代码分割（import()语法）。
• SEO：配合 SSR 框架（如 Nuxt.js）。
• TypeScript：通过 --template vue-ts 创建项目。