首先声明:这篇笔记中是在学习禹神最新Vue3教程记下来的,其中有一些自己写的笔记见解、搬禹神、vue、vite官网的一些笔记。主要目的还是给自己多一点知识点的总结。其实一遍下来,基本大部分都会,所以学习会很快。有几点我得好好在下面总结。
备注:现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。
## 查看 @vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
vue -V
## 安装或 升级你的 @vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择 3.x
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
## 下面基于webpack搭建项目成功后执行下面的命令就是成功创建Vue3项目!!!
? Please pick a preset: Default ([Vue 3] babel, eslint)
Vue CLI v5.0.8
✨ Creating project in F:\桌面\vue_test.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 864 packages in 35s
🚀 Invoking generators...
📦 Installing additional dependencies...
added 103 packages in 7s
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vue_test.
👉 Get started with the following commands:
$ cd vue_test
$ npm run serve
## 创建命令
npm create vue@latest
## 一些可选项
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
## 在项目被创建后,通过以下步骤安装依赖并启动开发服务器
> cd <your-project-name>
> npm install
> npm run dev
## vite构建vue项目
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
# bun
bunx create-vite my-vue-app --template vue
查看 create-vite 以获取每个模板的更多细节:vanilla,vanilla-ts, vue, vue-ts,react,react-ts,react-swc,react-swc-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts,solid,solid-ts,qwik,qwik-ts。
setup 是 Vue3 中的一个新配置项,值是一个函数,它是 Composition API “表演的舞台”,组件中所用到的:数据、方法、计算属性、监视……等,均配置在 setup 当中。
特点如下
//返回一个对象!!!
return {
name,
age,
tel,
changeName,
changeAge,
showTel,
};
//一个渲染函数
return () => "哈哈";
1、(data、methods……) 和 setup 能不能同时存在?
能,可以在一个 Vue 3 组件中同时使用 Options API 和 Composition API。但是,它们的使用场景是不同的。一般来说,如果你想要定义一些基础的响应式数据和钩子函数,使用 Options API 就足够了。而当你需要更复杂的逻辑或希望更好地组织你的代码时,Composition API 会是一个更好的选择。
2、setup 中定义的数据,在 data 中能否获得?
能,setup 这个钩子执行的时期比 data 早,当 data 中数据解析完毕时,setup 中数据早已经解析完毕了!!!但是注意的是 setup 不能再去读取 data 中的数据了
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 语法,它具有更多优势:
要启用该语法,需要在 代码块上添加 setup attribute:
<script setup>console.log('hello script setup')</script>
里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 只在组件被首次引入的时候执行一次不同, 中的代码会在每次组件实例被创建的时候执行。
Vue3 中可能会遇到两个 script 标签,一个是用来配置组件名称的,另一个是用来配置 setup 的。
<script lang="ts">
export default {
name:"Person123"
}
</script>
<script lang="ts" setup>
...
</script>
和上面这样写可能有点麻烦了!我们可以进行如下配置:
1、我们可以借助一个插件
npm i vite-plugin-vue-setup-extend -D
2、在 vite.config.ts
中进行配置
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), VueSetupExtend()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});