【小兔鲜】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.12v14.21.3v18.20.3system
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.3Now 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-projectnpm installnpm 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
> viteVITE 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.jsimport './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.jsimport { 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 小节

3.3 补充说明npm init vue@latest

npm init vue@latest 是一个用于创建 Vue.js 项目的命令行指令，它使用 ​npm（Node Package Manager）​ 来初始化一个基于 Vue 3 的最新版本的项目。下面详细解释这个命令的各个部分：

3.3.1 npm init

• 作用：npm init 是 npm 的一个命令，用于初始化一个新的 Node.js 项目（生成 package.json 文件）。
• 通常用法：npm init 会交互式地询问项目信息（如名称、版本等），但结合 vue@latest 后，它会直接调用 Vue 的脚手架工具来创建项目。

3.3.2 vue@latest

• ​含义：vue 是 Vue.js 的官方脚手架工具（create-vue），@latest 表示使用最新版本。
• ​作用：这个包会提供一个交互式命令行界面（CLI），引导你配置 Vue 项目的基本选项（如是否支持 TypeScript、Pinia、Router 等）。
• 替代写法：你也可以用 npm create vue@latest（npm create 是 npm init 的别名）。

3.3.3 执行流程

1. ​检查环境：npm 会检查本地是否安装了 create-vue，如果没有，会自动下载最新版本。
2. 启动向导：运行后，会进入交互式配置界面，询问：

• 项目名称（默认 vue-project）
• 是否支持 TypeScript？
• 是否启用 JSX？
• 是否安装 Vue Router（路由）？
• 是否安装 Pinia（状态管理）？
• 是否添加 Vitest 或 Cypress 测试工具？
• 是否启用 ESLint（代码规范检查）？

​3. 生成项目：根据你的选择，生成项目结构并安装依赖。

3.3.4 与 vue-cli 的区别

• ​Vue 2 时代：旧版使用 vue-cli（全局安装 npm install -g @vue/cli，然后运行 vue create my-app）。
• Vue 3 推荐：现在官方推荐使用 create-vue（即 npm init vue@latest），它基于 ​Vite​（更快、更轻量），而不是 Webpack。

3.3.5 使用 create-vue 指定 Vue 版本（Vue 3）​

npm init vue@latest 默认使用最新的 Vue 3 版本，但你可以通过以下方式间接控制 Vue 的版本：

npm init vue@latest my-vue-appcd my-vue-appnpm install vue@3.2.47  # 安装指定版本的 Vue 3

4. 组合式API - setup选项

Day01 P05