html頁面引入vue元件

2021-10-24 11:22:33 字數 1157 閱讀 2378

html頁面引入vue元件需要在頁面引入http-vue-loader.js

注意:要檢視頁面引入vue元件的效果不能直接在本地開啟index.html,會有跨域問題,可以在本地配置乙個nginx**,再用瀏覽器訪問http://localhost:port/index.html

1.建立my-component.vue

="hello"

>hello

}<

/div>

<

/template>

module.exports =}}

<

/script>

.hello

<

/style>

2.建立index.html

<

!doctype html>

"utf-8"

>

<

!-- 引入樣式 --

>

"stylesheet" href=

"">

<

!-- 先引入 vue --

>

"">

<

/script>

<

!-- 引入 http-vue-loader --

>

"">

<

/script>

<

/head>

>

<

/my-component>

<

/div>

<

/body>

<

!-- 引入元件庫 --

>

"">

<

/script>

// 使用httpvueloader

/html>

注意:要檢視頁面引入vue元件的效果不能直接在本地開啟index.html,會有跨域問題,可以在本地配置乙個nginx**,再用瀏覽器訪問http://localhost:port/index.html

html頁面中引入html

我們寫頁面通常會遇到這種情況,乙個模組很多頁面都用到,那麼我們為了方便就會單獨寫到乙個頁面,然後引入進去,我知道的有三種 1 用標籤 例 iframe有自己預設的高度,如果你引入的頁面高度超出他預設的高度會超出隱藏,所以,要加上height 2 用標籤 例 object也有自己的預設高度,如果你引入...

vue 公用頁面引用 vue引入公共元件及js

一 引入全域性js 1.commonfunctions檔案中新建common.js裡面寫上想全域性呼叫的方法 2.main.js中importcommon from commonfunctions common.js 引入檔案 vue.prototype.common common 掛載到原形上 3...

vue元件引入另一vue元件

個人blog,歡迎關注加收藏 在元件中引入另一組件 元件化開發,最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中 時,可以將其提出單獨組成乙個元件。重複使用。如下圖 其中底部導航條的部分 就會出現在多個元件中 在當前元件card.vue中引入barbottom.vue的步驟如下 在car...