创建项目：
npm init vite@latest 来创建项目
第二布： y
第三步：project name ：项目名称
第四步：select a framework 选择框架 熟悉那种选择那种，当前选择vue
第五步：select a variant： typeScript
项目创建完成
初始化
npm install 初始化项目
npm run dev 运行项目
关于 vue3
script 写法变化
vue2 data 里数据是通过
return 出去的
vue 3 写法 每次定义变量和方法都需要手动return 出去
vue3 setup 语法糖模式 大大方便书写模式
写法与 传统 js 有些相识
插值表达式和一些指令和vue2使用差别不大
代码展示
<script setup lang="ts">
import { ref,reactive} from 'vue'defineProps<{ msg: string }>()//命名 ts 类型 用ref或reactive 包括才是响应式数据
const count: number = ref(0)const arr: number[] = reactive([1, 2, 3, 4, 5, 6])const div: string = ref('<div>这是一个div</div>')const even:string= ref('click')//方法 第一种写法
function addcount() { count.value++
}//另一种写法 效果是一样的
const addcountB = () => { count.value++}function clicks() {console.log('这是一个点击事件')
}</script><template><!-- 插值表达式 -->
<div>{{ count }}<button @click.stop="addcount">点击加加++，判断变true</button>
</div>
<div>{{ count + 1 }}
</div>
<div>{{ count ? 'true' :'false' }}
</div>
<div>{{ arr.map(v=>({ num: v})) }}
</div>
<div v-html="div"></div>
<div v-if="true">v-if使用和vue2一样，v-show 同理</div><!-- 可以动态切换的事件,事件可以通过修饰符阻止一些事件，使用方式和vue2相识 -->
<div @[even].stop="clicks" >这是一个点击事件
</div><!-- 动态css可以通过表达式来切换 -->
<div :class="[true?'classA':'classC','classB']">
</div><!-- v-for 使用场景和vue2完全相同 -->
<div v-for="(item,index) in arr" :key="index">
</div><!-- v-once 只会渲染一次，且不会变化 -->
<div v-once>不会变化的值
</div><!-- 搭配v-for使用，数组里面的条件满足才更新，不满足，里面的数据不会更新，跳过更新 -->
<div v-for="(item,index) in arr" :key="index" v-memo="[item==2]"></div></template><style scoped>
.read-the-docs {color: #888;
}
</style>
效果展示
