vue教程：单文件组件（.vue文件） 作者：马育民 • 2021-01-12 21:31 • 阅读：10093 # 传统 Vue 组件 >摘自官网： https://cn.vuejs.org/v2/guide/single-file-components.html 在 Vue 项目中，使用 `Vue.component()` 来定义全局组件，然后用 `new Vue({ el: '#container '})` 在每个页面内指定一个容器元素。 这种方式适合 **中小规模的项目** ，JavaScript 用于将数据渲染到页面上 ### 缺点 在 **更复杂的项目** 中，或者前端完全由 JavaScript 驱动的时候，会有以下 **缺点** ： - **全局定义(Global definitions)**：强制要求每个 component 中的 **名字 不能重复** - **字符串模板(String templates)**：**缺乏语法高亮**，**没有代码提示** - **不支持CSS (No CSS support) **： **组件中无法定义CSS**。可以在外部定义 CSS，但这种方式，没有将 CSS 与 组件封装在一起，这是不好的 - **没有构建步骤(No build step) **：只能 ES5 ，不能使用 ES6 高级语法 ### 解决方法 文件扩展名为 `.vue` 的 **single-file components (单文件组件)** 为以上所有问题提供了解决方法，并且还可以使用 **webpack** 或 Browserify 等构建工具。 更多优点参见官网： https://cn.vuejs.org/v2/guide/single-file-components.html # .vue 单文件组件 `.vue` 文件，是 Vue 用于 **组件化 开发**的 **文件格式**。 包含了 HTML代码、CSS样式和JavaScript逻辑，将它们组合在一起形成一个 **独立的组件**。 ### 优点 使用 `.vue` 文件可以更好地管理和维护代码，提高开发效率。 组件之间保存到独立的 `.vue` 文件中，互不干扰 ### 组成 由3个部分组成： - template模板，即：`<template></template>` 标签 - js代码，即：`<script></script>` 标签 - css样式，即：`<style></style>` 标签 ### 缺点 不能在 HTML 文件中直接使用 `.vue` 文件，因为浏览器只能识别 `.html` 、`.css`、`.js` 等文件格式，无法识别 `.vue` 文件格式 **提示：**使用 `http-vue-loader.js`，可以在 HTML 文件中引入 `.vue` 文件，详见 [链接](https://www.malaoshi.top/show_1GWIUevvV4s.html "链接") ### 编译 为了解决上面的缺点，即：让浏览器能够正常运行 `.vue` 文件，需要 **编译**，将 `.vue` 文件编译成 `js` 和 `css` ### 单文件工程 为了能够编译，需要创建 **Vue 单文件工程** ### nodejs 为了能够创建 **Vue 单文件工程**，需要安装 nodejs等软件 # .vue 文件命名方式 - 大驼峰命名方式，类似java的类名，如：`MyBook.vue` - 全小写，如果是多个单词组成，中间由 `-` 组成，如：`my-book.vue` 原文出处：http://malaoshi.top/show_1IXOW8x0vTo.html