溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vue不用build的使用實(shí)例分析”，在日常操作中，相信很多人在vue不用build的使用實(shí)例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue不用build的使用實(shí)例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
作為一個(gè)謹(jǐn)慎的程序員，我希望從一開始就正確地構(gòu)造應(yīng)用程序。在用戶界面中有以下元素:
header
main area
footer
我希望將每個(gè)組件定義為一個(gè)單獨(dú)的組件。我希望將他們的代碼放在單獨(dú)的模塊中，以便于識別和使用。
在一個(gè)典型的 Vue JS 設(shè)置中，您將使用 .vue 的單組件文件。不幸的是，這需要一個(gè)基于 webpack、 rollup 等的構(gòu)建過程。事實(shí)證明，您可以在不使用任何構(gòu)建過程的情況下獲得幾乎相同的體驗(yàn)！它可能不像原來的協(xié)議那么全面，但是對于許多簡單的場景來說還是不錯(cuò)的。更重要的是，它沒有常規(guī)構(gòu)建過程和 CLI 工具引入的復(fù)雜性和依賴性。
該項(xiàng)目的結(jié)構(gòu)如下:
index.html index.js index.css header/ header.js header.css content/ content.js content.css footer/ footer.js footer.css
我們的邏輯 UI 組件清楚地反映在項(xiàng)目的目錄結(jié)構(gòu)中。
當(dāng)瀏覽器加載 index. html 時(shí)，會發(fā)生以下情況:
Vue JS 庫是從 CDN 庫中獲取的 unpkg.com/vue
獲取組件樣式
應(yīng)用程序模塊從 index.js 導(dǎo)出然后被執(zhí)行
注意我們是如何使用 < script type = " module" & 來告訴瀏覽器我們正在加載所有花里胡哨的現(xiàn)代 ES6 代碼！
當(dāng)執(zhí)行 index.js 時(shí)，它會導(dǎo)入包含我們的組件的后續(xù)模塊:
Content from 內(nèi)容來自/content/content.js Header from 標(biāo)題來自/header/header.js Footer from 的頁腳/footer/footer.js
這些組件與常規(guī)的 Vue JS 單文件組件沒有多大區(qū)別。它們可以擁有 Vue JS 組件的所有特性和功能，比如:
data props methods computed lifecycle events slots template with markup etc.
因?yàn)闆]有構(gòu)建過程，我們的組件必須以不同的方式組合在一起?，F(xiàn)代的 JavaScript 特性在這方面對我們有所幫助。與打包相反，我們可以在任何需要的地方import所需的依賴項(xiàng)。經(jīng)過這么多年不費(fèi)腦筋的打包瀏覽器終于知道如何導(dǎo)入模塊; 然后，我們將使用 JS 模板文本代替template。
組件代碼的結(jié)構(gòu)如下:
const template = `
<div>
...
</div>
`
export default {
template,
data () {
},
computed: {
},
// etc.
}主要的應(yīng)用程序組件在 index.js 文件中。它的任務(wù)是為所有組件分配定制的 HTML 標(biāo)記，比如 < app-header > 或 < app-footer > 。
import Header from './header/header.js'
import Content from './content/content.js'
import Footer from './footer/footer.js'
const App = {
el: 'main',
components: {
'app-header': Header,
'app-content': Content,
'app-footer': Footer
}
}
window.addEventListener('load', () => {
new Vue(App)
})然后使用這些自定義標(biāo)記在 index. html 文件中構(gòu)建應(yīng)用程序 UI。我們最終得到了一個(gè)簡單易懂的用戶界面:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Minimalistic Vue JS</title> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="header/header.css"> <link rel="stylesheet" href="content/content.css"> <link rel="stylesheet" href="footer/footer.css"> <script src="https://unpkg.com/vue"> </script> <script src="index.js" type="module"> </script> </head> <body> <main> <app-header bg-color="#c5cae2"> </app-header> <app-content> </app-content> <app-footer> (c) Tomasz Waraksa, Dublin, Ireland </app-footer> </main> </body> </html>
一個(gè)不那么瑣碎的應(yīng)用程序通常會有一大堆視圖，用戶可以導(dǎo)航到這些視圖。事實(shí)證明，Vue 路由器在我們的設(shè)置中工作，沒有任何問題。您可以像定義任何其他組件一樣定義視圖或頁面，使用上面描述的相同方法。然后，不要將這些組件注冊為自定義標(biāo)記，而是用標(biāo)準(zhǔn)的方式將它們鏈接到路由，例如:
import Home from './home/home.js'
import About from './about/about.js'
export default [
{
name: 'home',
path: '/',
component: Home
},
{
name: 'about',
path: '/about',
component: About
}
]然后獲取 Vue Router 庫并在 index. html 中添加路由器占位符:
<head> ... <script src="https://unpkg.com/vue-router"> </script> </head> <body> ... <router-view> </router-view> ... </body>
最后，在 index.js 中將路由器與應(yīng)用程序一起初始化:
const router = new VueRouter({ routes })
const app = {
el: 'main',
router,
...
}現(xiàn)在，您可以通過輸入 URL、使用 < router-link > 組件或以編程方式導(dǎo)航到這兩個(gè)頁面。
到此，關(guān)于“vue不用build的使用實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼