首页手记 Vue3资料入门教程：从零开始学习Vue3框架

Vue3资料入门教程：从零开始学习Vue3框架

标签：

Vue.js

本文介绍了Vue3的基本概念和环境搭建，包括系统要求、Vue CLI安装以及创建第一个Vue3项目。同时，文章详细讲解了Vue3的基础语法、组件开发、Composition API、状态管理和路由配置等内容。此外，还提供了Vue3项目部署和调试的相关技巧。本文将帮助你全面了解和掌握Vue3。

Vue3简介与环境搭建

Vue3简介

Vue.js 是一个用于构建用户界面的渐进式框架，采用声明式渲染、组件化开发和双向数据绑定等特性，使构建交互式Web应用变得简单。Vue3是Vue.js的最新版本，在性能、功能和API设计等方面都有改进。Composition API的引入，为复杂应用开发提供了更好的支持。

开发环境搭建

系统要求

确保你的开发环境满足以下要求：

Node.js (推荐版本：14.0或更高)
npm (推荐版本：5.0或更高)

安装Node.js和npm

访问Node.js官网（https://nodejs.org/）下载并安装最新的长期支持版本（LTS）。安装完成后，可以在命令行中输入以下命令来验证安装是否成功：

node -v
npm -v

安装Vue CLI

Vue CLI是一个命令行工具，可以快速搭建和管理Vue项目。使用npm安装Vue CLI：

npm install -g @vue/cli

验证Vue CLI安装成功：

vue --version

创建第一个Vue3项目

使用Vue CLI创建一个新的Vue项目，命令如下：

vue create my-vue-app

进入项目目录并启动开发服务器：

cd my-vue-app
npm run serve

打开浏览器，访问http://localhost:8080，查看项目是否成功运行。

项目结构

my-vue-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

public/：存放公共资源文件，例如index.html。
src/：存放项目源代码文件，包括组件、样式和入口文件。
node_modules/：存放项目依赖的包。
package.json：项目配置文件，包括依赖包和脚本等信息。
README.md：项目说明文档。
babel.config.js：Babel配置文件。
vue.config.js：Vue CLI配置文件，可以自定义Webpack配置。

Vue3基础语法

组件化开发

Vue3 使用组件化的方式进行开发。组件可以看作是可复用的HTML标签，可以包含HTML代码、JavaScript代码和样式。

创建组件

创建组件时，需要定义一个ES模块，导出一个default函数。例如，定义一个HelloWorld组件：

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

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

注册和使用组件

在父组件中注册并使用子组件。例如，在App.vue中注册并使用HelloWorld组件：

<!-- App.vue -->
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue3 App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

数据绑定与计算属性

Vue可以使用v-bind或:指令绑定数据到HTML属性，或动态绑定元素类名、样式等。还可以通过计算属性简化数据处理逻辑。

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      message: 'Hello Vue!'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

方法与事件处理

Vue可以定义方法，并使用v-on或@指令绑定事件处理器。例如：

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked');
    }
  }
}
</script>

Vue3新特性介绍

Composition API

Vue3引入的Composition API提供了一种更灵活的组织和复用逻辑代码的方式。通过setup函数，可以更直观地组织逻辑。

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    return {
      count,
      doubleCount
    }
  }
}

生命周期钩子

Vue3中的生命周期钩子与Vue2相比有所改进，例如onMounted替换了mounted。

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is now mounted.')
    })
  }
}

Vue3组件开发

组件的创建与注册

创建组件

创建一个简单的组件MyComponent.vue：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

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

注册和使用组件

在父组件中注册并使用MyComponent：

<!-- App.vue -->
<template>
  <div id="app">
    <MyComponent title="My Component" />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

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

组件的属性与事件传递

属性传递

父组件可以将数据传递给子组件，子组件通过props获取数据：

<!-- MyComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在父组件中传递属性：

<!-- App.vue -->
<template>
  <div id="app">
    <MyComponent :message="parentMessage" />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

事件传递

父组件可以监听子组件触发的事件，子组件通过emit触发事件：

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  emits: ['custom-event'],
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child')
    }
  }
}
</script>

在父组件中监听事件：

<!-- App.vue -->
<template>
  <div id="app">
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue'

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message)
    }
  }
}
</script>

插槽（Slot）的使用

基本插槽

子组件可以定义插槽，父组件可以根据需要填充内容：

<!-- CustomSlot.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

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

在父组件中使用插槽：

<!-- App.vue -->
<template>
  <div id="app">
    <CustomSlot>
      <p>Slot content</p>
    </CustomSlot>
  </div>
</template>

<script>
import CustomSlot from './components/CustomSlot.vue'

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

命名插槽

子组件可以定义多个插槽，父组件根据插槽名称填充不同的内容：

<!-- CustomNamedSlots.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

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

在父组件中使用命名插槽：

<!-- App.vue -->
<template>
  <div id="app">
    <CustomNamedSlots>
      <template v-slot:header>
        <p>Header content</p>
      </template>
      <p>Main content</p>
      <template v-slot:footer>
        <p>Footer content</p>
      </template>
    </CustomNamedSlots>
  </div>
</template>

<script>
import CustomNamedSlots from './components/CustomNamedSlots.vue'

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

动态组件与异步组件

动态组件

动态组件可以根据条件渲染不同的组件：

<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

异步组件

异步组件可以按需加载，减少初始加载时间：

const AsyncComponent = () => import('./components/AsyncComponent.vue')

export default {
  components: {
    AsyncComponent
  }
}

Vue3状态管理

响应式系统原理

Vue3的响应式系统基于ES6的Proxy对象，可以监听属性的变化，从而实现数据的自动更新。响应式系统的核心是ReactiveEffect，它负责收集依赖和触发更新：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

function effect(fn) {
  const deps = []
  const getter = () => {
    const value = fn()
    deps.forEach(deps => deps())
  }
  getter()
  return getter
}

function track(target, key) {
  const deps = new Set()
  if (target) {
    const depsMap = target.dep || (target.dep = new Map())
    const dep = depsMap.get(key) || new Set()
    deps.add(dep)
    depsMap.set(key, dep)
  }
  return deps
}

function trigger(target, key) {
  if (target) {
    const depsMap = target.dep || (target.dep = new Map())
    const dep = depsMap.get(key)
    if (dep) {
      dep.forEach(reaction => reaction())
    }
  }
}

const obj = reactive({
  count: 0
})

const reaction = effect(() => {
  console.log('count:', obj.count)
})

track(obj, 'count')
obj.count = 1
trigger(obj, 'count')

Vuex基础使用

Vuex简介

Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态。Vuex也提供用于构建模块化、可预测及易调试的应用程序的机制。

安装与配置Vuex

安装Vuex：

npm install vuex --save

创建Vuex store：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount
    }
  },
  actions: {
    incrementAction({ commit }) {
      commit('increment', { amount: 1 })
    }
  },
  getters: {
    count(state) {
      return state.count
    }
  }
})

在main.js中引入并使用store：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

状态管理的最佳实践

使用模块化拆分状态
使用异步操作
使用持久化状态

使用模块化拆分状态

import { createStore } from 'vuex'

export default createStore({
  modules: {
    moduleA: {
      state: {
        count: 0
      },
      mutations: {
        increment(state, payload) {
          state.count += payload.amount
        }
      }
    },
    moduleB: {
      state: {
        count: 0
      },
      mutations: {
        increment(state, payload) {
          state.count += payload.amount
        }
      }
    }
  }
})

使用异步操作

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment', { amount: 1 })
      }, 1000)
    }
  }
})

使用持久化状态

import { createStore } from 'vuex'
import { sync } from 'vuex-router-sync'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  plugins: [createPersistedState()]
})

export default store

Vue3路由与导航

Vue Router简介

Vue Router是Vue.js官方的路由管理器，允许根据路径渲染不同的组件。Vue Router提供了诸如懒加载、参数、路由元信息、全局和局部前置/后置守卫等功能。

路由的基本配置

安装Vue Router：

npm install vue-router@next --save

创建路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在main.js中使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

路由参数与查询参数

路由参数

定义带参数的路由：

const routes = [
  { path: '/user/:id', component: User }
]

在组件中获取参数：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.params.id)
  }
}

查询参数

定义带查询参数的路由：

<a href="/about?user=John">About</a>

在组件中获取查询参数：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.query.user)
  }
}

嵌套路由与动态路由

嵌套路由

定义嵌套路由：

const routes = [
  { path: '/user', component: User, children: [
    { path: ':id', component: UserProfile }
  ]}
]

在组件中使用嵌套路由：

<UserProfile />

动态路由

定义动态路由：

const routes = [
  { path: '/user/:id', component: User }
]

在组件中使用动态路由：

<router-view></router-view>

Vue3项目部署与调试

开发环境与生产环境的差异

开发环境主要用于开发和调试，通常开启热重载和详细的错误信息。生产环境用于部署到线上环境，通常关闭热重载和性能优化，例如压缩代码、代码分割等。

开发环境配置

在vue.config.js中配置开发环境：

module.exports = {
  devServer: {
    hot: true,
    port: 8080
  }
}

生产环境配置

在vue.config.js中配置生产环境：

module.exports = {
  productionSourceMap: false,
  runtimeCompiler: true,
  transpileDependencies: []
}

构建与部署项目

构建项目：

npm run build

构建后的文件将会被输出到dist目录，可以使用npm run serve来启动静态文件服务器：

npm run serve

或者使用npm run build生成静态文件后，将dist目录部署到服务器：

scp -r dist/* root@your.server.com:/var/www/html

浏览器调试工具

Vue3提供了Vue Devtools，可以更方便地调试Vue应用。可以通过Chrome浏览器的插件市场搜索并安装Vue Devtools。

使用 Vue Devtools

安装并启用Vue Devtools插件后，可以通过以下方式使用：

打开Vue Devtools插件。
连接到当前运行的Vue应用。
查看组件树、状态、事件等。

错误处理与调试技巧

错误处理

在开发过程中，遇到错误时可以用console.error输出错误信息：

try {
  // 可能会抛出错误的代码
} catch (error) {
  console.error(error)
}

调试技巧

使用Vue Devtools检查组件状态和依赖关系。
使用console.log打印变量和状态。
使用debugger停留在特定代码行进行调试。

export default {
  setup() {
    const state = reactive({
      count: 0
    })
    console.log('Count:', state.count)
    debugger
  }
}

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

DIEA

手记
篇

粉丝

63

获赞与收藏

387

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3资料入门教程：从零开始学习Vue3框架

系统要求

安装Node.js和npm

安装Vue CLI

项目结构

创建组件

注册和使用组件

Composition API

生命周期钩子

创建组件

注册和使用组件

属性传递

事件传递

基本插槽

命名插槽

动态组件

异步组件

Vuex简介

安装与配置Vuex

状态管理的最佳实践

使用模块化拆分状态

使用异步操作

使用持久化状态

路由的基本配置

路由参数与查询参数

路由参数

查询参数

嵌套路由与动态路由

嵌套路由

动态路由

开发环境配置

生产环境配置

构建与部署项目

使用 Vue Devtools

错误处理

调试技巧

阅读免费教程