基于Vue單文件組件詳解

更新時間：2017年09月15日 07:56:20 作者：小火柴的藍色理想

下面小編就為大家?guī)硪黄赩ue單文件組件詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文將詳細介紹Vue單文件組件

概述

在很多 Vue 項目中，使用 Vue.component 來定義全局組件，緊接著用 new Vue({ el: '#container '}) 在每個頁面內(nèi)指定一個容器元素。

這種方式在很多中小規(guī)模的項目中運作的很好，在這些項目里 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者前端完全由 JavaScript 驅(qū)動的時候，下面這些缺點將變得非常明顯：

1、全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復

2、字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的 \

3、不支持 CSS (No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏

4、沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Pug (formerly Jade) 和 Babel

文件擴展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構建工具

下面是一個文件名為 Hello.vue 的簡單實例：

　通過單文件組合，現(xiàn)在我們獲得：

1、完整語法高亮
2、CommonJS 模塊
3、組件化的 CSS

還可以使用預處理器來構建簡潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。

這些特定的語言只是例子，可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助提高生產(chǎn)力的預處理器。如果搭配vue-loader使用Webpack，它也是把CSS Modules當作第一公民對待

【關注點分離】

一個重要的事情值得注意，關注點分離不等于文件類型分離。在現(xiàn)代 UI 開發(fā)中，已經(jīng)發(fā)現(xiàn)相比于把代碼庫分離成三個大的層次并將其相互交織起來，把它們劃分為松散耦合的組件再將其組合起來更合理一些。在一個組件里，其模板、邏輯和樣式是內(nèi)部耦合的，并且把它們搭配在一起實際上使得組件更加內(nèi)聚且更可維護。

即便不喜歡單文件組件，仍然可以把 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 組件，就進入了高級 JavaScript 應用領域

最好參考 webpack-simple。只要遵循指示，就能很快地運行一個用到 .vue 組件，ES2015 和熱重載 (hot-reloading) 的 Vue 項目。這個模板使用 Webpack，一個能將多個模塊打包成最終應用的模塊打包工具

在 Webpack 中，每個模塊被打包到 bundle 之前都由一個相應的 “l(fā)oader” 來轉(zhuǎn)換，Vue 也提供 vue-loader 插件來執(zhí)行 .vue 單文件組件的轉(zhuǎn)換。這個 webpack-simple 模板已經(jīng)為你準備好了所有的東西

無論更鐘情Webpack或是Browserify，簡單的或更復雜的項目都可參考一些文檔模板。瀏覽github.com/vuejs-templates，找到需要的部分，然后參考 README 中的說明，使用 vue-cli 工具生成新的項目

模板中使用 Webpack，一個模塊加載器加載多個模塊然后構建成最終應用

以上這篇基于Vue單文件組件詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: