vue网页实现
Vue网页实现的基本步骤
安装Vue.js
通过npm或CDN引入Vue.js。npm安装命令：npm install vue。CDN引入方式：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>。
创建Vue实例 在HTML中定义挂载点，通常是一个div元素。JavaScript中创建Vue实例并指定挂载点：
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})组件化开发
单文件组件 使用.vue文件组织组件，包含template、script和style三部分。需要配合webpack或Vite等构建工具使用。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Component Message'
}
}
}
</script>
<style scoped>
div {
color: red;
}
</style>组件注册
全局注册：Vue.component('my-component', { /* ... */ })。局部注册：在组件options中使用components属性。
路由配置
安装vue-router
通过npm安装：npm install vue-router。基本配置示例：
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})路由视图
在模板中使用<router-view>显示匹配的组件，<router-link>创建导航链接。
状态管理
Vuex安装与配置
安装：npm install vuex。创建store：
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})组件中使用
通过this.$store访问store，或使用mapState/mapMutations等辅助函数。
项目构建
Vue CLI
安装：npm install -g @vue/cli。创建项目：vue create project-name。
Vite构建
快速构建工具，创建命令：npm create vite@latest。
常见功能实现
表单绑定 使用v-model实现双向绑定：
<input v-model="message" type="text">
<p>{{ message }}</p>条件渲染 v-if和v-show控制元素显示：
<div v-if="isVisible">内容</div>
<div v-show="isShow">内容</div>列表渲染 v-for指令渲染数组：
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>部署上线
生产环境构建
使用构建工具生成优化后的静态文件。Vue CLI命令：npm run build。
静态文件部署 将dist目录内容上传至Web服务器或CDN。配置服务器路由支持History模式。
