【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例

0. 市场上Vue前端工程师用到的技术

Vue3 + TS + Element Plus + Vite + CSS3

Node的版本 16~18

Element Plus https://cn.element-plus.org/zh-CN/

1. Vue3小兔鲜先导课

1.1 技术栈

1.2 项目规模

1.3 项目亮点

1.4 课程安排

2. 认识Vue3

2.1 Vue3组合式API体验

通过一个Counter案例体验Vue3新引入的组合式API

首先是Vue2的书写方式

<template>
  <button @click="addCount">{{ count }}</button>
</template>

<script>
// Vue2的代码规范
export default {
  data() {
    return {
      count: 0
    }
  },

  methods: {
    addCount() {
      this.count++
    }
  }

}

</script>

<style lang="less">

</style>

Vue3的书写方式

<template>
  <button @click="addCount">{{ count }}</button>
</template>

<script setup>
// vue3组合式api实现
import {ref} from 'vue'

const count = ref(0)
const addCount = () => count.value++
</script>

<style lang="less">

</style>

Vue3更多的优势

3. create-vue创建Vue3项目

create-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代前端工具链），为开发提供极速响应。

(base) ➜  ~ nvm list
->    v12.22.12
       v14.21.3
       v18.20.3
         system
default -> 12 (-> v12.22.12)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v18.20.3) (default)
stable -> 18.20 (-> v18.20.3) (default)
lts/* -> lts/iron (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12
lts/fermium -> v14.21.3
lts/gallium -> v16.20.2 (-> N/A)
lts/hydrogen -> v18.20.3
lts/iron -> v20.14.0 (-> N/A)
(base) ➜  ~ nvm use v18.20.3


Now using node v18.20.3 (npm v10.8.3)
(base) ➜  ~ node -v
v18.20.3

使用create-vue创建项目

1. node的版本要求是16.0或者更高
2. npm init vue@latest 这个命令会安装并执行crate-vue

(base) ➜  ~ npm init vue@latest
Need to install the following packages:
create-vue@3.15.1
Ok to proceed? (y) y


> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  请输入项目名称：
│  vue-project
│
◇  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
│  none

正在初始化项目 /Users/fanzhen/vue-project...
│
└  项目初始化完成，可执行以下命令：

   cd vue-project
   npm install
   npm run dev

| 可选：使用以下命令在项目目录中初始化 Git：

   git init && git add -A && git commit -m "initial commit"

npm notice
npm notice New major version of npm available! 10.8.3 -> 11.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.2.0
npm notice To update run: npm install -g npm@11.2.0
npm notice



(base) ➜  vue-project npm run dev

> vue-project@0.0.0 dev
> vite


  VITE v6.2.3  ready in 699 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

3.1 新建项目结构

package.json

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.2.1",
    "vite-plugin-vue-devtools": "^7.7.2"
  }
}

main.js

import './assets/main.css'

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

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>

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))
    },
  },
})

3.2 小节

4. 组合式API - setup选项

Day01 P05