vue3 学习总结

Vue3学习：搭建项目与API使用

最新推荐文章于 2025-12-04 20:16:23 发布

原创

最新推荐文章于 2025-12-04 20:16:23 发布 · 772 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #vue.js #前端

为什么要学 Vue3

Vue3的优势

Vue2选项式 vs Vue3组合式API

create-vue搭建Vue3项目

认识create-vue

使用create-vue创建项目

熟悉项目目录和关键文件

项目目录和关键文件

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) // 允许用@访问目录
    },
  },
})

package.json

{
  "name": "vue3_demo",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "vite": "^6.0.5",
    "vite-plugin-vue-devtools": "^7.6.8"
  }
}

main.js

import './assets/main.css'

// new Vue() 创建一个有应用实列 => createApp()
// createRouter() createStore()
// 将创建实列进行了封装，保证每个实例的独立封闭性
import { createApp } from 'vue'
import App from './App.vue'

// mount 设置挂载点 #app (id为app的盒子)
createApp(App).mount('#app')

app.vue

<!-- 加上setup有允许在script中直接编写组合式API -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <!-- 不再要求唯一根元素 -->
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

组合式API：setup选项

setup选项的写法和执行时机

setup选项中写代码的特点

<script setup> 语法糖

App.vue(复杂写法)

<script>
// setup
// 1. 执行时机，比beforeCreate还要早
// 2. setup函数中，获取不到this(this是undefind)
// 3. 数据 和 函数，需要在 setup 最后 return,才能在模板中有应用
// 问题: 每次都要return 好麻烦，该怎么解决？
export default {
  setup () {
    // console.log('setup函数', this)

    // 数据
    const message = '你好啊'

    // 函数
    const logMessage = () => {
      console.log(message)
    }

    // 返回
    return {
      message,
      logMessage
    }
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script>

<template>
  <div>{
  
  { message }}</div>
  <button @click="logMessage"> 按键 </button>
</template>

App.vue(简化代码)

<!-- <script>
// setup
// 1. 执行时机，比beforeCreate还要早
// 2. setup函数中，获取不到this(this是undefind)
// 3. 数据 和 函数，需要在 setup 最后 return,才能在模板中有应用
// 问题: 每次都要return 好麻烦，该怎么解决？
// 4. 通过 setup 语法糖简化代码

export default {
  setup () {
    // console.log('setup函数', this)

    // 数据
    const message = '你好啊'

    // 函数
    const logMessage = () => {
      console.log(message)
    }

    // 返回
    return {
      message,
      logMessage
    }
  },
  beforeCreate () {
    console.log('beforeCreate函数')
  }
}
</script> -->

<!-- 简化代码 -->

<script setup>
const message = '我是奶龙'
const logMessage = () => {
  console.log(message)
}
</script>
<template>
  <div>{
  
  { message }}</div>
  <button @click="logMessage"&