vue 3教程

创建项目

create-vue创建vue3项目
推荐，这个库也是官方进行维护的，所以使用起来无烦恼，yyds。
执行方式也是比较简单的，我们可以基于vite创建vue3或者vue2的项目

npm init vue@3
npm init vue@2

依次填写和选择下列选项

✔ Project name: … vue3-train  项目名称
✔ Add TypeScript? …  Yes  是否使用ts
✔ Add JSX Support? …  Yes 是否需要支持jsx
✔ Add Vue Router for Single Page Application development? …  No 是否使用vue-router
✔ Add Pinia for state management? …  Yes 是否使用pinia
✔ Add Vitest for Unit Testing? … No 是否使用vitest测试
✔ Add Cypress for both Unit and End-to-End testing? … No 是否使用cypress测试
✔ Add ESLint for code quality? …  Yes 是否使用eslint
✔ Add Prettier for code formatting? …  Yes 是否使用prettier

参考 https://juejin.cn/post/7106300598491807780

单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例：

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

参考

https://cn.vuejs.org/guide/introduction.html#api-styles

vue3+ts

官方文档vue-cli https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli
// 查看版本确认安装success
vue --version
// 创建 & 选择自定义模板、插件等
vue create vue3-ts

参考 https://juejin.cn/post/6944873503522816030