vue app 实现
Vue.js 应用实现步骤
安装 Vue CLI
使用 Vue CLI 快速搭建项目结构。确保已安装 Node.js，然后运行以下命令安装 Vue CLI：
npm install -g @vue/cli创建新项目：
vue create my-vue-app项目结构
创建后，项目目录通常包含以下核心文件：
src/main.js：应用入口文件，初始化 Vue 实例。src/App.vue：根组件，包含应用的主模板。src/components/：存放可复用的子组件。public/index.html：HTML 模板文件。
编写组件
在 src/components/ 下创建 .vue 文件，例如 HelloWorld.vue：
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!"
};
}
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</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;在 main.js 中引入路由：
import router from './router';
app.use(router);状态管理（可选）
使用 Vuex 或 Pinia 管理全局状态。以 Pinia 为例：
npm install pinia在 src/store/index.js 中创建 Store：
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++;
}
}
});在 main.js 中引入：
import { createPinia } from 'pinia';
app.use(createPinia());运行与构建
启动开发服务器：
npm run serve构建生产环境代码：
npm run build注意事项
- 使用
v-bind或:缩写绑定动态属性。 - 事件处理通过
v-on或@缩写实现。 - 生命周期钩子（如
mounted）用于处理组件初始化逻辑。 - 通过
props实现父子组件通信。
