vue3-使用vite创建项目

vue-cli处于维护模式，也可以使用脚手架正常创建vue3项目，与vue2创建方式一致

官方推荐使用vite创建项目

• vite 是新一代前端构建工具,官网地址
• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX、CSS 等支持开箱即用
• 真正的按需编译，不再等待整个应用编译完成

vue3对比vue2的提升

• 打包大小减少41%。

• 初次渲染快55%, 更新渲染快133%。

• 内存减少54%

• 使用Proxy代替defineProperty实现响应式。

• 重写虚拟DOM的实现和Tree-Shaking

• 可以更好的支持TypeScript`

• 新特性:组合API、新内置组件等等

创建项目#

1. 执行命令

npm create vue@latest

2. 如果出现这种类型报错，查看node版本，更新版本后解决

3. 执行命令后的各种选项按需yes or no

main.ts文件变化#

// main.ts
// 引入createApp用于创建应用
import { createApp } from 'vue'

// 引入App组件
import App from './App.vue'

// 创建App，将App组件挂载在id 为app的容器，index.html中
createApp(App).mount('#app')

组件内变化#

<!--  script里面有setup的时候，里面不能用默认暴露，原因后续 -->

<!-- 声明使用ts编写 -->
<script  lang="ts">

export default  {
  name:"App"
}

</script>

<template>
  <!--<template> 里面可以没有根标签 -->
  <p>hello world</p>

</template>

总结#

• Vite 项目中，index.html 是项目的入口文件，在项目最外层。
• 加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
• Vue3中是通过createApp函数创建一个应用实例