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>
码字不易,路过小伙伴给个赞呗,如有错误,欢迎各位大佬们指正。