怎麼用hbuilder跑vue專案_聽說vue專案不用build也能用?
阿新 • • 發佈：2021-02-11
技術標籤：怎麼用hbuilder跑vue專案
。
元件程式碼的結構如下:
const template = `
...
`export default { template, data () { }, computed: { }, // etc.}
主要的應用程式元件在 index.js 檔案中。它的任務是為所有元件分配定製的 HTML 標記，比如 < 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) })
然後使用這些自定義標記在 index. html 檔案中構建應用程式 UI。我們最終得到了一個簡單易懂的使用者介面:
span style="line-height: 26px;">html><html><head> <meta charset="utf-8"> <title>Minimalistic Vue JStitle> <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>
路由選擇
一個不那麼瑣碎的應用程式通常會有一大堆檢視，使用者可以導航到這些檢視。事實證明，Vue 路由器在我們的設定中工作，沒有任何問題。 您可以像定義任何其他元件一樣定義檢視或頁面，使用上面描述的相同方法。然後，不要將這些元件註冊為自定義標記，而是用標準的方式將它們連結到路由，例如:
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 中新增路由器佔位符:
...