单文件组件指的是：一个文件中只包含一个组件，也就是说一个文件就是一个组件。
单文件组件的后缀名需要定义为 .vue ，需要在脚手架中才能运行 所以本章节内容只是为了引出脚手架的文件格式，理解即可。
单文件组件的文件名一般首字母大写，多个单词使用大驼峰命名 例如：MyCode
单文件组件格式：
1. <template> 2. <!-- 组件的结构 --> 3. </template> 4. 5. <script> 6. // 组件的逻辑【Vue的数据、方法等等】 7. </script> 8. 9. <style> 10. /* 组件的样式 */ 11. </style>
注：VSCode 默认不识别 Vue 代码格式，还需要安装 Vue 语法插件 ，安装后输入 < 再按回车键自动生成代码格式.
创建单文件组件:
1. <template> 2. <div class="demo"> 3. <h2>{{title}}</h2> 4. <p>用户：{{username}}</p> 5. </div> 6. </template> 7. 8. <script> 9. const FrameHead = Vue.extend({ 10. data() { 11. return { 12. title: "商城管理系统", 13. username: "张三", 14. }; 15. }, 16. }; 17. export default FrameHead; 18. </script> 19. 20. <style> 21. .demo { 22. display: flex; 23. justify-content: space-between; 24. background-color: aqua; 25. } 26. </style>
注：组件创建完毕后，还需要在 script 标签中将组件导出，供外界使用。
单文件组件的简写方式【常用】:
1. <template> 2. <div class="demo"> 3. <h2>{{title}}</h2> 4. <p>用户：{{username}}</p> 5. </div> 6. </template> 7. 8. <script> 9. export default { 10. name: "FrameHead", 11. data() { 12. return { 13. title: "商城管理系统", 14. username: "张三", 15. }; 16. }, 17. }; 18. </script> 19. 20. <style> 21. .demo { 22. display: flex; 23. justify-content: space-between; 24. background-color: aqua; 25. } 26. </style>
注：省略了 Vue.extend() 方法，组件名替换为 name 名。另外 name 名尽量和文件名一样，所以还需要将文件名改为 FrameHead.vue.
脚手架中常见的文件:
除了 FrameHead.vue 组件 我们再创建一个 FrameNav.vue 组件备用.
1. <template> 2. <div class="demo"> 3. <ul> 4. <li v-for="(item, index) in list" :key="index" @click="isHref(item)"> 5. {{ item }} 6. </li> 7. </ul> 8. </div> 9. </template> 10. 11. <script> 12. export default { 13. name: "FrameNav", 14. data() { 15. return { 16. list: ["首页", "用户管理", "商品管理", "轮播图管理"] 17. }; 18. }, 19. methods: { 20. isHref(name) { 21. alert(`跳转至${name}`); 22. } 23. } 24. }; 25. </script> 26. 27. <style> 28. .demo { 29. background-color: blue; 30. } 31. </style>
然后我们再创建一个 App.vue 文件 用于管理所有组件.
1. <template> 2. <div> 3. <FrameHead></FrameHead> 4. <FrameNav></FrameNav> 5. </div> 6. </template> 7. 8. <script> 9. // 引入组件 10. import FrameHead from './FrameHead.vue'; 11. import FrameNav from './FrameNav.vue'; 12. export default { 13. name: "App", 14. components: { 15. FrameHead, 16. FrameNav 17. } 18. } 19. </script>
这些组件创建完毕后，我们还需要创建一个 main.js 作为入口文件，在这个文件中创建 Vue 实例管理这些组件.
1. import App from './App.vue'; 2. 3. new Vue({ 4. el: '#root', 5. template: `<App>`, 6. components: { App }, 7. })
最后还需要创建一个 index.html 页面，用于引入 main.js 入口文件，显示组件中的内容.
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8" /> 5. <title>单文件组件的语法</title> 6. </head> 7. <body> 8. <!-- 准备一个容器 --> 9. <div id="root"></div> 10. 11. <script src="./js/vue.js"></script> 12. <script src="./main.js"></script> 13. </body> 14. </html>
原创作者：吴小糖
创作时间：2023.4.11
