VUE3.0 学习笔记- vite的使用，与typescript 的配置

vite 是 vue 3 新出的打构建工具，据说运行速度比webpack  要快不少

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

vite 的基本使用，创建项目

• 创建项目

               

 

 

• 项目名称

            

 

•  选择框架（这里我选择的vue）

          

• 选择变体JS 还是 TS （这里推荐使用TS,vue3 已经全面适应TS，后期项目更容易维护）

         

 

• 项目创建成功，下载依赖，即可运行

         

• 在main.ts 中 我们可以发现 已经是vue3 项目

          

 

 

　　vue3 中 最大的区别几位 setup 找个函数，但是每次声明都需要return 出去变量，很是麻烦，所以，官方提供了 <scriptsetuplang="ts"> 语法糖，直接命名即可

       语法糖 地址 

　　

<template>  // 可以都多个根目录，vue2 只允许有一个根目录
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  {{ aa }}
</template>
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
const aa = ref("你好");
</script>

　　

　　如果创建项目时，没有ts,则需要下载typeScript ，那么项目可能会报错，是因为它不能解析 vue文件 那么需要进行 ts 初始化

　　

tsc  --init 

　　然后创建 tsconfig.json 文件 

  文件中写入：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

　　创建 tsconfig.node.json 

　　

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts"]
}