mac vue3+ ts 项目搭建

vue3+ ts 项目搭建

以下操作均在mac终端上操作，mac上需要增加sudo关键字进行操作，window系统不需要。

首先先检查本地vue版本号，是否已经安装vue

vue --version

如果本地没有vue版本，请到vue官网去安装版本vue官网安装

创建项目

sudo vue create vue3-demo

选择vue3版本，然后回车开始搭建

搭建完先运行一下项目

npm run serve

因为我们要使用的是ts，所以要安装一下ts

sudo npm install typescipt --save

然后创建tsconfig.json文件，通过命令行来生成

sudo tsc --init

然后修改一下tsconfig.json的内容

{
  "compilerOptions": {
    "target": "es5",                                    
    "module": "commonjs",                                
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
    "skipLibCheck": true,                               
    "noImplicitAny":false
  },
  "include": [
    "src/*.vue",
    "src/*.ts",
    "src/**/*.vue",
    "src/**/*.ts",
  ],
  "exclude": [
    "node_modules"
  ]
}

因为我们要使用的是ts，所以我们要把最好src下面的main.js换成main.ts,不然编译的时候会可能报错，找不到main.js文件

现在，就可以开始vue3+ts表演之路了。

个人建议
由于vue3.0所有的方法，变量都要return出去，这样不利于后期的代码维护，个人建议直接上手vue3.2版本的，不懂的同学直接去官网看看文档

<template>
  <button @click="count">{{num}}</button>
</template>

<script setup>
import {ref} from 'vue'
const num = ref(0)
const count =()=>{
  num.value ++
}
</script>

码字不易，路过小伙伴给个赞呗，如有错误，欢迎各位大佬们指正。