当前位置：首页 > VUE

vue实现页面

2026-01-13 23:46:33VUE

Vue 实现页面的基本方法

安装 Vue.js 依赖
通过 npm 或 yarn 安装 Vue.js：

npm install vue
# 或
yarn add vue

创建 Vue 实例
在 HTML 中引入 Vue.js 并初始化一个 Vue 实例：

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

使用单文件组件 (SFC)

创建 .vue 文件
单文件组件包含模板、脚本和样式：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Component',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

路由配置

安装 Vue Router
使用 npm 或 yarn 安装 Vue Router：

npm install vue-router
# 或
yarn add vue-router

配置路由
创建路由文件并定义路由规则：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

状态管理

安装 Vuex
使用 npm 或 yarn 安装 Vuex：

npm install vuex
# 或
yarn add vuex

创建 Store
定义状态、mutations、actions 和 getters：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    getCount: state => state.count
  }
})

集成到主应用

在 main.js 中引入
将路由和状态管理集成到 Vue 实例中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue实现页面