vue.js单文件组件开发¶

1. vue.js单文件组件¶

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件。

Vue.component('button-counter',{
    data:function(){
        return{
            counter:0
        }   
    },
    template: `<div> <h1>{{counter}}</h1></div>`
})

这种方式在很多中小规模的项目中运作的很好，但当在更复杂的项目中，下面这些缺点将变得非常明显：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step)

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法

2. 运行单文件组件¶

2.1 环境要求¶

安装npm

npm 是 "node package manager" 是一个基于node.js的包管理器，是node.js社区最流行，支持第三方包最多的包管理器

安装node.js

Node.js 是一个开源与跨平台的 JavaScript 运行时环境，内核基于 Chrome V8 引擎.

vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的标准工具。

  安装：

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  创建一个项目：

  vue create my-project
  # OR
  vue ui

2.2 单文件组件的暴露与导入¶

模块化规范¶

Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

// tools.js
module.exports = {
    max,
    min
}

//main.js
const tools = require('/tools.js')
tools.max();
tools.min();

ES6模块化语法 export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

vue.js单文件组件使用ES6模块化规范

<!--./components/HelloWorld.vue-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>

<!-- ./app.vue -->
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components:{
    HelloWorld
  }
}
</script>