浅谈vue 单文件探索

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

这种方案在只是使用 JavaScript 增强某个视图的中小型项目中表现得很好。然而在更复杂的项目中，或者当你的前端完全采用 JavaScript 驱动的时候，以下弊端就显现出来：

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

以 vue 作为开发技术栈的前端开发者，往往会配合前端构建工具，进行项目的工程化管理。比如，大家常用的 vue 全家桶 + webpack 的方案进行一些中大型前端项目的开发。配合 webpack 后，vue 的组件化优势更加明显，我们可以通过单文件的组件化开发方式，在工作实践中搭建前端页面，从而提高开发效率。 有这样一个问题：“当我们在写 vue 单文件时，我们在写什么？” 很多人可能会这样回答：template 负责模板，javascript 负责逻辑，style 负责样式。当回答到这里时，一个 vue 开发者的世界观基本上算是很明确了。我们要做的就是在一个单文件组件中写 template、javascript、style。如果仅仅局限于此，显然我们无法从更好的利用的单文件组件服务我们的整个开发流程。接下来我将和大家讨论在 vue 单文件开发中的一些方法论的问题。

vue 单文件本质

vue单文件是以特定文件扩展名 .vue 命名的文件。如下所示的代码：

ListDemo.vue

<template>  <div class="list-demo">    <ul>      <li v-for="item in list" :key="item.key">{{item.value}}</li>    </ul>  </div></template><script>export default {  name: 'ListNav',  data() {    return {      list: [        { key: 'home', value: '首页' },        { key: 'category', value: '文章分类' },        { key: 'tags', value: '标签' },        { key: 'about', value: '关于我' },        { key: 'links', value: '友情链接'},      ],    };  },};</script><style>.list-demo {  font-size: 14px;}</style>

代码中含有 template，script，style。三者的作用此处就不在赘述，如上的结构展示了一个 vue 单文件基本的文件结构。其背后的理念就是一个单文件组件对应了一个功能性组件，该组件的模板，样式，业务逻辑都采用就近维护的思想。从组件的复用性，后期可维护性的角度上来说，这样的理念都大大的提高了组件化的开发效率。vue 的单文件，既不是 js，也不是 html，也不是 css 文件，这样的文件如何被应用到页面上，这也就是下面将会说到的一个问题，vue 单文件是如何被处理成页面中可用的资源。