vue 单文件组件

单文件组件是什么

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

存在以下问题：

• 全局定义 强制要求每个 component 中的命名不得重复
• 字符串模板 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 单文件组件 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

单文件组件基本格式

<template lang="">
  <div>
    
  </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
  
</style>

在 vscode 扩展中下载 vetur 和 Vue 3 Snippets 插件，在文件中输入 vueInit 即可生成。

使用处理 vue 单组件

• 在终端输入如下命令安装相应的加载器

  npm i vue-loader vue-template-compiler -D
  

• 在 webpack.config.js 文件中添加 vue-loader 配置项：