当前位置：首页 > VUE

vue项目实现

2026-01-06 23:19:17VUE

Vue 项目实现指南

环境准备

确保已安装 Node.js（建议版本 14+）和 npm/yarn。通过以下命令检查版本：

node -v
npm -v

安装 Vue CLI（脚手架工具）：

npm install -g @vue/cli

创建项目

使用 Vue CLI 创建新项目：

vue create my-vue-project

选择默认配置或手动配置（如 Babel、Router、Vuex 等）。

进入项目目录：

cd my-vue-project

项目结构

典型 Vue 项目结构如下：

src/：核心代码目录
- main.js：入口文件
- App.vue：根组件
- components/：存放子组件
- assets/：静态资源
public/：HTML 模板和公共文件
package.json：依赖和脚本配置

开发与构建

启动开发服务器：

npm run serve

项目会运行在 http://localhost:8080，支持热重载。

构建生产版本：

npm run build

生成的文件位于 dist/ 目录。

常用功能实现

路由配置
安装 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

状态管理
安装 Vuex：

npm install vuex

创建 src/store/index.js：

import { createStore } from 'vuex'

export default createStore({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

组件示例
创建 src/components/HelloWorld.vue：

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

<script>
export default {
  props: ['msg'],
  data() {
    return { count: 0 }
  }
}
</script>

<style scoped>
h1 { color: #42b983; }
</style>