vue中单文件探索的示例分析-创新互联
这篇文章给大家分享的是有关vue中单文件探索的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
目前
成都创新互联公司已为1000+的企业提供了网站建设、域名、
网站空间、网站托管、
服务器租用、企业网站设计、
永春网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
在很多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 等构建工具。
以 vue 作为开发技术栈的前端开发者，往往会配合前端构建工具，进行项目的工程化管理。比如，大家常用的 vue 全家桶 + webpack 的方案进行一些中大型前端项目的开发。配合 webpack 后，vue 的组件化优势更加明显，我们可以通过单文件的组件化开发方式，在工作实践中搭建前端页面，从而提高开发效率。 有这样一个问题：“当我们在写 vue 单文件时，我们在写什么？” 很多人可能会这样回答：template 负责模板，javascript 负责逻辑，style 负责样式。当回答到这里时，一个 vue 开发者的世界观基本上算是很明确了。我们要做的就是在一个单文件组件中写 template、javascript、style。如果仅仅局限于此，显然我们无法从更好的利用的单文件组件服务我们的整个开发流程。接下来我将和大家讨论在 vue 单文件开发中的一些方法论的问题。
vue 单文件本质
vue单文件是以特定文件扩展名 .vue 命名的文件。如下所示的代码：
ListDemo.vue
代码中含有 template，script，style。三者的作用此处就不在赘述，如上的结构展示了一个 vue 单文件基本的文件结构。其背后的理念就是一个单文件组件对应了一个功能性组件，该组件的模板，样式，业务逻辑都采用就近维护的思想。从组件的复用性，后期可维护性的角度上来说，这样的理念都大大的提高了组件化的开发效率。vue 的单文件，既不是 js，也不是 html，也不是 css 文件，这样的文件如何被应用到页面上，这也就是下面将会说到的一个问题，vue 单文件是如何被处理成页面中可用的资源。
vue 单文件被处理的流程
vue 单文件配合 webpack 构建工具，在 webpack 中会交由 vue-loader 来处理。如下所示：
{
test: /\.vue$/,
loader: 'vue-loader',
}项目中通过 import 或者 require 引入的 vue 单文件，都会经过 vue-loader 处理，vue-loader 在这个过程中会将模板按照 template、script、style 解析并将处理结果返回，三种不同类型的文件交由接下来的loader 进行处理。如果该单文件组件在父组件中的 components 声明，则 components 中对应的该项会被插入解析后 script 代码。这个过程从入口文件 main.js 开始，所有涉及的被依赖单文件组件依次经历这样的处理过程。之后所有的组件的实例化将根据业务逻辑中的依赖关系进行，这个过程也是我们平时在开发中经常用到的一种方式。（这里可以单拉一篇文章详细讲述 vue-loader 的处理流程）
单文件的常用姿势
模板中的组件引用
一、使用方式
组件的拆分和嵌套：
操作手法：父组件中引入子组件，components 中注册，template 中添加相应的组件引用模板
这种方式也是我们在进行单文件的开发中常用的一种方式，所有组件的实例化，都被隐含在组件的嵌套关系和业务逻辑中。开发者只需要关心组件的引入，在父组件逻辑中注册该组件，并在父组件的模板中以标签的方式引入组件。这个过程中待引入的组件的实例化时机也可以通过 v-if 指令在业务逻辑中进行控制。
二、适用场景
大部分场景下我们都可以通过这样的方式进行组件化的开发。这种模式的有一个特点： 组件的引入通过组件注册和模板中写入对应的组件的标签来完成。模板中通过标签来引入组件这一步必不可少，这个特点在某些业务场景下可能给开发者带来了一定的重复工作量。
API 式的调用
API 式的调用指的是手动创建子组件的实例，业务逻辑中无需引入组件和模板标签占位，在暴露的 API 中控制组件的实例化与显示。
一、使用方式
操作手法：
Confirm.vue
{{content}}
cancel
ok
confirm.js
import Vue from 'vue';
import Confirm from './confirm';
const ConfirmConstructor = Vue.extend(Confirm);
const confirm = (content) => {
let confirmInstance = new ConfirmConstructor({
data: {
content,
},
});
confirmInstance.vm = confirmInstance.$mount();
confirmInstance.vm.visible = true;
// 手动插入目的 dom
document.body.appendChild(confirmInstance.vm.$el);
confirmInstance.vm.callback = action => {
return new Promise((resolve, reject) => {
resolve(action);
});
};
return confirmInstance.vm;
};如上所示，给出的是一个确认弹框的场景实现。确认弹框在很多用户交互中是一个必须的交互形式。很多组件库也采用上面这种 API 式的组件调用。调用方仅仅通过 api 的调用，就能实现该功能模块的引用。这样就避免了在 template 中通过标签占位的方式引用。实现原理就是手动接管单文件组件的实例化，通过 Vue.extend 获得该组件对应的 Vue 的子类，在暴露给调用的 api 中去实例化这个组件。这个过程中我们可能还要完成一些组件数据的注入，逻辑相关以及手动将该组件插入到目的 dom 中。手动的注入 dom 是该种方式的一个很大特点，通过在 api 中动态的注入目的 dom，避免我们在各个业务组件中调用该功能模块时重复性的在业务组件 template 中手写组件标签。
二、适用场景
区别和共性
共性：通过实例化对应组件完成组件的功能逻辑
区别：实例化的时机和方式不同。模板式的引入通过组件注册和标签引入的方式来使用单文件组件。标签引入解决了子组件插入的 dom 位置问题，开发者无需关心。API 式的单文件组件使用，在 API 调用时手动实例化组件，需要手动控制插入到目的 dom。
感谢各位的阅读！关于“vue中单文件探索的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：vue中单文件探索的示例分析-创新互联
分享链接：
http://chengdu.cdxwcx.cn/article/csdhoh.html
