Vue 实践：项目实战，初探实战之道

2024-01-16 19:43:08

步入实战之旅：构建项目结构

├── node_modules  # 包含项目依赖包
├── src  # 源代码目录
│   ├── App.vue  # Vue 根组件
│   ├── main.js  # 项目入口文件
│   ├── components  # 组件目录
│   ├── views  # 视图目录
│   └── router  # 路由目录
├── .gitignore  # Git 忽略文件
├── package-lock.json  # 包管理文件
├── package.json  # 包管理文件
└── README.md  # 项目自述文件

依赖包安装

npm install

组件创建：搭建应用骨架

Vue 根组件：App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

子组件：HelloWorld.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

路由配置：导航应用之旅

路由器实例化

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

const router = new VueRouter({
  routes
})

将路由器实例注册到 Vue 实例

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

数据管理：让应用动起来

数据绑定

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello Vue!'
    }
  }
}
</script>

状态管理

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store