用vue实现网页
Vue.js 网页开发基础步骤
安装 Vue.js 开发环境
通过 npm 或 yarn 安装 Vue CLI（命令行工具），用于快速初始化项目。
npm install -g @vue/cli
# 或
yarn global add @vue/cli创建新项目
使用 Vue CLI 生成项目模板，选择默认配置或手动配置（如 Babel、Router 等）。
vue create my-vue-project
cd my-vue-project项目结构与核心文件说明
src/App.vue
根组件，包含模板、逻辑和样式。示例代码：
<template>
<div id="app">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: "Vue 网页示例"
};
}
};
</script>
<style>
#app {
font-family: Arial, sans-serif;
}
</style>src/main.js
项目入口文件，初始化 Vue 实例并挂载到 DOM。
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')添加路由功能
安装 Vue Router
npm install vue-router配置路由
创建 src/router/index.js 文件：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/', component: Home }
]
})在 main.js 中引入路由：
import router from './router'
new Vue({ router, render: h => h(App) }).$mount('#app')组件化开发
创建可复用组件
例如 src/components/Header.vue：
<template>
<header>
<nav>
<router-link to="/">首页</router-link>
</nav>
</header>
</template>
<script>
export default {
name: 'AppHeader'
}
</script>在父组件中引入：
<template>
<div id="app">
<AppHeader />
<router-view />
</div>
</template>
<script>
import AppHeader from './components/Header.vue'
export default {
components: { AppHeader }
}
</script>状态管理（Vuex）
安装 Vuex
npm install vuex创建 Store
新建 src/store/index.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count++
}
}
})在组件中使用：
<template>
<button @click="$store.commit('increment')">
计数: {{ $store.state.count }}
</button>
</template>构建与部署
开发模式运行
npm run serve生产环境构建
生成静态文件到 dist 目录：
npm run build部署到服务器
将 dist 文件夹内容上传至 Web 服务器（如 Nginx、Apache）。
