結合 webpack 使用 vue router

使用export default和export匯出模組中的成員; 對應 es5（node）中的module.exports和exports使用import ** from **和import '路徑'還有import from '模組標識'匯入其他模組

使用箭頭函式：(a, b)=>

案例：1.定義乙個 test.js 檔案

// 在 es6 中，使用 export default 和 export 向外暴露成員：

var info =
export
default info
/* export default  */

export default 向外暴露的成員，可以使用任意的變數來接收

在乙個模組中，export default 只允許向外暴露1次

在乙個模組中，可以同時使用 export default 和 export 向外暴露成員

export

var title =
'小星星'
export
var content =
'哈哈哈'

使用 export 向外暴露的成員，只能使用 的形式來接收，這種形式，叫做 【按需匯出】

export 可以向外暴露多個成員， 同時，如果某些成員，我們在 import 的時候，不需要，則可以 不在 {} 中定義

使用 export 匯出的成員，必須嚴格按照 匯出時候的名稱，來使用 {} 按需接收；

使用 export 匯出的成員，如果 就想 換個 名稱來接收，可以使用 as 來起別名；

import m222,

from
'test.js'
console.
log(m222)
console.
log(title123 +
' --- '
+ content)

import vue from

'vue'
// 匯入 vue-router 包
import vuerouter from
'vue-router'
// 手動安裝 vuerouter 
vue.
use(vuerouter)
// 匯入 自定義路由模組(抽離理由為單獨的模組)
import router from
'./router.js'
var vm =
newvue
()

render 會把 el 指定的容器中，所有的內容都清空覆蓋，所以 不要 把 路由的 router-view 和 router-link 直接寫到 el 所控制的元素中，只能展示到屬於路由的 中去

router.js 檔案(抽離理由為單獨的模組)

import vuerouter from

'vue-router'
// 匯入 account 元件
import account from
'./main/account.vue'
import goodslist from
'./main/goodslist.vue'
// 匯入account的兩個子元件
// 3. 建立路由物件
var router =
newvuerouter(,
]},]
})// 把路由物件暴露出去
export
default router

2.只要 咱們的 style 標籤， 是在 .vue 元件中定義的，那麼，推薦都為 style 開啟scoped 屬性

"scss" scoped>

body 
}<
/style>

webpack結合使用vue router

首先要先安裝vue router npm i vue router d在入口檔案中引入vue router import vue from vue import vuerouter from vue router 手動安裝vuerouter vue.use vuerouter var router ...

結合webpack使用vue router

main.js import vue from vue 1.匯入 vue router 包 import vuerouter from vue router 2.手動安裝 vuerouter vue.use vuerouter 匯入 account 元件 import account from ma...

webpack中結合Vue使用

1 安裝vue的包 cnpm i vue s 2 由於在webpack中，推薦使用.vue這個元件模板檔案定義元件，所以需要安裝能解析這個檔案的loader cnpm i vue loader vue template compiler d 3 在main.js中，匯入vue模組 import vu...