当前位置：首页 > VUE

怎么用VUE实现项目

2026-02-22 10:25:07VUE

安装Vue环境

确保已安装Node.js（建议版本16+）。通过以下命令安装Vue CLI（命令行工具）：

npm install -g @vue/cli

创建Vue项目

使用Vue CLI创建新项目，选择默认配置或手动配置（如Router、Vuex等）：

vue create my-project

进入项目目录并启动开发服务器：

cd my-project
npm run serve

项目结构说明

src/：核心代码目录
- main.js：应用入口文件
- App.vue：根组件
- components/：存放可复用组件
public/：静态资源（如HTML模板）

开发组件

在src/components/中创建.vue文件，例如HelloWorld.vue：

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

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

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

在App.vue中引入并使用组件：

<template>
  <HelloWorld />
</template>

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

export default {
  components: { HelloWorld }
};
</script>

添加路由（可选）

若需多页面，安装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;

在main.js中注入路由：

import router from './router';

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

状态管理（可选）

使用Pinia（推荐）或Vuex管理全局状态。以Pinia为例：
安装：

npm install pinia

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

import { defineStore } from 'pinia';

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

在组件中使用：

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

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