Vue单文件组件的如何使用方式介绍

Lara ·

更新时间:2024-11-11

· 851 次阅读

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

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。

但挡在更复杂的项目中，或者你的前端完全由 javascript 驱动的时候，下面这些缺点将变得非常明显：

全局定义（global definitions）强制要求每个 component 中的命名不能重复字符串模板 (string templates)缺乏语法高亮，在 html 有多行的时候，需要用到丑陋的 \ 不支持 CSS （no css support）意味着当 html 和 javascript 组件化时，css 明显被遗漏没有构建步骤 ( no build step)限制只能使用 html和 es5 javascript ，而不能使用预处理器，如 pug(formerly jade)和 babel

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

这是一个文件名为 hello.vue的简单实例


<template>
  <p> {{ gretting}} world! </p>
</template>
<script>
  module.exports = {
    data: function(){
      return {
        greeting: 'hello'
      }
    }
  }
</script>
<style scoped>
p {
  font-size: 2em;
  text-algin: center
}
</style>

现在我们获得：

完整语法高亮 commonJs 模板组件化的 css

正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 pug,babel,和 stylus


<template lang="jade">
  div
    p {{greeting}} world!
    other-component 
</template>
<script>
  import default{
    data(){
      return{
        greeting:'hello'
      }
    },
    components: {
      OtherComponent
    }
  }
</script>
<style lang='stylus' scoped>
  p
   font-size: 2em;
   text-align: center  
</style>

这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 Webpack，它也是把 CSS Modules 当作第一公民来对待的。

怎么看待关注点分离？

一个重要的事情值得注意，关注点分离不等于文件类型分离。

在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。

在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
即便你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。


<!-- my-component.vue -->
<template>
 <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

VUE 文件组

1024 个赞