脚手架以及单文件组件
脚手架类型
https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
vite 推荐
Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！
要使用 Vite 来创建一个 Vue 项目，非常简单：
$ npm init vue@latest
这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。
vue-cli
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。
$ npx vue create vue-cli-app
如何判断项目中使用的是 vite 还是 vue-cli脚手架？
vite - vite.config.js
vue-cli vue.config.js
单文件组件
Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。
// src/main.js vue项目的入口文件 import { createApp } from 'vue' import './style.css' import App from './App.vue' createApp(App).mount('#app')
选项式API的单文件组件
<!-- src/Child.vue --> <template> <h3 class="box">child</h3> </template> <!-- 可以添加 scoped 该样式只针对当前组件有效 --> <style scoped> .box { font-size: 50px; color: #00f; } </style>
<!-- src/App.vue --> <template> <div class="box"> {{ count }} <button @click="count++">加1</button> <!-- 使用组件 --> <Child /> </div> </template> <script> import Child from './Child.vue' // 引入组件 export default { components: { // 局部注册组件 Child }, data () { return { count: 0 } } } </script> <style> .box { font-size: 30px; color: #f66; } </style>
组合式API的单文件组件
<!-- src/Child.vue --> <template> <h3 class="box">child</h3> </template> <script> export default { setup () { return {} } } </script> <style scoped> .box { font-size: 50px; color: #00f; } </style>
<!-- src/App.vue --> <template> <div class="box"> {{ count }} <button @click="count++">加1</button> <!-- 使用组件 --> <Child /> </div> </template> <script> import { ref } from 'vue'; import Child from './Child.vue' // 引入组件 export default { components: { // 局部注册组件 Child }, setup () { const count = ref(100) return { count } } } </script> <style> .box { font-size: 30px; color: #f66; } </style>
组合式API的简写的单文件组件
<!-- src/Child.vue --> <template> <h3 class="box">child</h3> </template> <script setup> </script> <style scoped> .box { font-size: 50px; color: #00f; } </style>
<!-- src/App.vue --> <script setup> import { ref } from 'vue'; import Child from './Child.vue' // 引入组件(默认已经局部注册了 Child 组件) const count = ref(100) // 后续再无需返回 count </script> <template> <div class="box"> {{ count }} <button @click="count++">加1</button> <!-- 使用组件 --> <Child /> </div> </template> <style> .box { font-size: 30px; color: #f66; } </style>
简写形式接收父组件数据
<!-- src/Child.vue --> <template> <h3 class="box">child - {{ props.str }} - {{ myStr }}</h3> </template> <script setup> import { computed } from 'vue' // 定义子组件接收父组件的数据 const props = defineProps({ str: String }) const myStr = computed(() => props.str) </script> <style scoped> .box { font-size: 50px; color: #00f; } </style>
vue<!-- src/App.vue --> <script setup> import { ref, onErrorCaptured } from 'vue'; import Child from './Child.vue' // 引入组件(默认已经局部注册了 Child 组件) onErrorCaptured(() => { console.log('出错了') }) const count = ref(100) // 后续再无需返回 count </script> <template> <div class="box"> {{ count }} <button @click="count++">加1</button> <!-- 使用组件 --> <Child str="测试"/> </div> </template> <style> .box { font-size: 30px; color: #f66; } </style>
