vue实现页面
使用 Vue 实现页面的方法
创建 Vue 项目
通过 Vue CLI 快速创建项目框架，确保已安装 Node.js 和 npm/yarn。
运行命令初始化项目：
vue create my-project选择默认配置或手动配置（如 Babel、Router、Vuex 等）。
编写页面组件
在 src/views 或 src/pages 目录下创建单文件组件（.vue）。例如：
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">点击事件</button>
</div>
</template>
<script>
export default {
data() {
return {
title: "Vue 页面示例"
};
},
methods: {
handleClick() {
alert("按钮被点击");
}
}
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>配置路由
在 src/router/index.js 中定义路由，将组件映射到路径：
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/views/HomePage.vue';
Vue.use(Router);
export default new Router({
routes: [
{ path: '/', component: HomePage }
]
});挂载到根实例
在 src/main.js 中挂载 Vue 实例并注入路由：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app');运行与构建
启动开发服务器：
npm run serve构建生产环境代码：
npm run build关键注意事项
- 组件化开发：将页面拆分为可复用的子组件（如头部、底部）。
- 状态管理：复杂数据流建议使用 Vuex 集中管理状态。
- 响应式设计：结合
v-bind和 CSS 媒体查询实现适配多端。
扩展功能
- 动态路由：通过
:id实现参数传递。 - 异步加载：使用
import()实现路由懒加载。 - API 集成：通过
axios或fetch对接后端接口。
