当前位置：首页 > VUE

vue项目实现

2026-02-25 14:37:26VUE

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）示例：

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：

vue项目实现

npm install pinia

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

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