建站
咨詢
售后
建站咨詢
新聞中心
#介紹
在很多 Vue 項目中，我們使用 app.component 來定義全局組件，緊接著用 app.mount('#app') 在每個頁面內(nèi)指定一個容器元素。
運河網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)公司于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
這種方式在很多中小規(guī)模的項目中運作的很好，在這些項目里 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者你的前端完全由 JavaScript 驅(qū)動的時候，下面這些缺點將變得非常明顯：
- 全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復
- 字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的
\ - 不支持 CSS (No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
- 沒有構(gòu)建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用預處理器，如 Pug (formerly Jade) 和 Babel
所有這些都可以通過擴展名為 .vue 的 single-file components (單文件組件) 來解決，并且還可以使用 webpack 或 Browserify 等構(gòu)建工具。
這是一個文件名為 Hello.vue 的簡單實例：
現(xiàn)在我們獲得：
- 完整語法高亮
- CommonJS 模塊
- 組件作用域的 CSS
正如我們說過的，我們可以使用預處理器來構(gòu)建簡潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。
這些特定的語言只是例子，你可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS 或者其他任何能夠幫助你提高生產(chǎn)力的預處理器。如果搭配 vue-loader 使用 webpack，它也能為 CSS Modules 提供頭等支持。
#怎么看待關(guān)注點分離？
一個重要的事情值得注意，關(guān)注點分離不等于文件類型分離。在現(xiàn)代 UI 開發(fā)中，我們已經(jīng)發(fā)現(xiàn)相比于把代碼庫分離成三個大的層次并將其相互交織起來，把它們劃分為松散耦合的組件再將其組合起來更合理一些。在一個組件里，其模板、邏輯和樣式是內(nèi)部耦合的，并且把他們搭配在一起實際上使得組件更加內(nèi)聚且更可維護。
即便你不喜歡單文件組件，你仍然可以把 JavaScript、CSS 分離成獨立的文件然后做到熱重載和預編譯。
This will be pre-compiled
#起步
#例子沙箱
如果你希望深入了解并開始使用單文件組件，請來 CodeSandbox 看看這個簡單的 todo 應用。
#針對剛接觸 JavaScript 模塊開發(fā)系統(tǒng)的用戶
有了 .vue 組件，我們就進入了高階 JavaScript 應用領(lǐng)域。如果你沒有準備好的話，意味著還需要學會使用一些附加的工具：
- Node 包管理器 (npm)： 閱讀 Getting Started guide 中關(guān)于如何從注冊地 (registry) 獲取包的章節(jié)。
- 現(xiàn)代 JavaScript 與 ES2015/16：閱讀 Babel 的 Learn ES2015 guide。你不需要立刻記住每一個方法，但是你可以保留這個頁面以便后期參考。
在你花一天時間了解這些資源之后，我們建議你參考 Vue CLI。只要遵循指示，你就能很快地運行一個帶有 .vue 組件、ES2015、webpack 和熱重載 (hot-reloading) 的 Vue 項目！
#針對高階用戶
CLI 會為你搞定大多數(shù)工具的配置問題，同時也支持細粒度自定義配置項。
有時你會想從零搭建你自己的構(gòu)建工具，這時你需要通過 Vue Loader 手動配置 webpack。關(guān)于學習更多 webpack 的內(nèi)容，請查閱其官方文檔和 Webpack Academy。
文章標題：創(chuàng)新互聯(lián)VUE3教程：Vue3.0單文件組件
URL分享：http://m.fisionsoft.com.cn/article/djidigc.html
