官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite
vite 官网:https://vitejs.cn
什么是 vite?—— 新一代前端构建工具。
优势如下:
开发环境中,无需打包操作,可快速的冷启动。
轻量快速的热重载(HMR)。
真正的按需编译,不再等待整个应用编译完成。
传统构建 与 vite 构建对比图
指令 npm init vite@latest 或者 npm create vite@latest
npm init vue@latest 同样使用的vite 但是此命令配置项比较多 可以直接选择需要的插件
使用yarn
yarn create vite
使用PNPM
pnpm create vite
pnpm create vue@latest 同样使用的vite 但是此命令配置项比较多 可以直接选择需要的插件
更详细的
Project name:项目名称,默认值:vue-project,可输入想要的项目名称,此处不建议中文。
Add TypeScript? 是否加入TypeScript组件?默认值:No。
Add JSX Support? 是否加入JSX支持?默认值:No。
Add Vue Router for Single Page Application development? 是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。
Add Pinia for state management? 是否添加Pinia组件来进行状态管理?默认值:No。
Add Vitest for Unit testing? 是否添加Vitest来进行单元测试?默认值:No。
Add Cypress for both Unit and End-to-End testing? 是否添加Cypress来进行单元测试和端到端测试?默认值:No。
Add ESLint for code quality? 是否添加ESLint来进行代码质量检查?默认值:No。
如果创建的时候不显示TypeScript 可以选择升级vue-cli
详细的可查看vite官网
截止至 2021-07-16 ,< script setup > 方案已在 Vue 3.2.0-beta.1 版本中脱离实验状态,正式进入 Vue 3.0 的队伍,在新的版本中已经可以作为一个官方标准的开发方案使用(但初期仍需注意与开源社区的项目兼容性问题,特别是 UI 框架)。
Vue 的 3.1.2 版本是针对 script-setup 的一个分水岭版本,自 3.1.4 开始 script-setup 进入定稿状态,部分旧的 API 已被舍弃
< script setup >是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 < script > 语法,它具有更多优势
要使用这个语法,需要将 setup attribute 添加到 < script > 代码块上
<script setup>
console.log('hello script setup')
</script>
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
script>
<template>
<div @click="log">{{ msg }}div>
template>
<script setup>
import { capitalize } from './helpers'
script>
<template>
<div>{{ capitalize('hello') }}div>
template>
响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样,ref 值在模板中使用的时候会自动解包:
<script setup>
import { ref } from 'vue'
const count = ref(0)
script>
<template>
<button @click="count++">{{ count }}button>
template>
<script setup>
import MyComponent from './MyComponent.vue'
script>
<template>
<MyComponent />
template>
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
script>
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
template>
import { FooBar as FooBarChild } from './components'
<script setup>
import * as Form from './form-components'
script>
<template>
<Form.Input>
<Form.Label>labelForm.Label>
Form.Input>
template>
<script setup>
const vMyDirective = {
beforeMount: (el) => {
// 在元素上做些操作
}
}
script>
<template>
<h1 v-my-directive>This is a Headingh1>
template>
<script setup>
// 导入的指令同样能够工作,并且能够通过重命名来使其符合命名规范
import { myDirective as vMyDirective } from './MyDirective.js'
script>
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
script>
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
script>
-在 < script setup> 使用 slots 和 attrs 的情况应该是很罕见的,因为可以在模板中通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlots 和 useAttrs 两个辅助函数
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
script>
< script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()
<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
script>
关于一些发展和特性也可以参考这篇文章 https://blog.csdn.net/luoxiaonuan_hi/article/details/129533552