Vue.js组件学习（4）高级篇—单文件组件

1. 单文件组件的意义。

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

这种方式在很多中小规模的项目中运作的很好，在这些项目里 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 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

2. 单文件组建的使用环境搭建。

在本机安装：

npm(Node.js)
vue-cli
webpack

3. 单文件组件的结构。

<template>
</template>

<script>
</script>

<style>
</style>

4. 第一个单文件组件的例子。

4.1 新建一个Vue项目

可以通过vue命令行创建：

vue init webpack 项目名

也可以通过HBuilder创建：

4.2 创建完的项目目录结构如下：

file

node_modules：依赖文件
public：静态文件
src
- assets：资源文件
- components：单文件组件文件
- App.vue：项目入口文件
- main.js：主js文件

4.3 新建test.vue

在components下新建test.vue文件，内容如下：

<template>
    <button>{{btncontent}}</button>
</template>

<script>
    export default{
        props:["btncontent"],
        data:function(){
            return {
            }
        }
    }
</script>

<style>
</style>

4.4 修改App.vue

<template>
  <div id="app">
    <SuperButton btncontent="点我吧!"></SuperButton>
  </div>
</template>

<script>
import SuperButton from './components/test.vue'

export default {
  components: {
    SuperButton
  }
}
</script>

<style>
</style>

这样就可以了！