webpack中export匯出與路由巢狀

2021-10-23 20:03:12 字數 3005 閱讀 6245

1.在配置好檔案後,在主入口匯入vue包,並且將所需要打包的檔案引入到入口檔案中。使用render方法展示到頁面

import

vuefrom

'vue'

import

login

from

'./login.vue'

console

.log

(login);

newvue(,

methods:

,components:

,render:function

(createelement

,context)}

)

login.vue格式

<

template

>

<

div>

<

input

type

='button'

value

='show'

@click

='show'

>

<

h1>

}>

<

/div

>

<

/template

>

<

script

>

export

default

,methods:}}

<

/script

>

第二種方法

var

info

=export

default

info

或者

export

default

注意:在乙個模組中, export default 只允許 向外 暴露1次 ,否則會直接報錯

按需匯入/匯出

入口檔案

import

vuefrom

'vue'

import

login

,from

'./login.js'

//按需匯入

console

.log

(title);

newvue(,

methods:

,components:

,render:c

=>

(login)/

/es6寫法})

js下,按需匯出檔案

export

vartitle

='小星星'

配置主入口檔案

注意:render會把el 指定的容器所有的內容 清空覆蓋,所以不要把路由的router-view 和 router-link直接寫到 el控制的元素中

import

vuefrom

'vue'

import

from

//匯入vue-router包

import

vuerouter

from

'vue-router'

import

account

from

'./account.vue'

import

goodlist

from

'./goodlist.vue'

//手動安裝vuerouter

vue.

use(

vuerouter)/

/掛載中介軟體//

建立路由物件

varrouter

=new

vuerouter(,

]})new

vue(

)

登入註冊案例實現

建立parentvue 存放父元件,subcom存放子元件,router.js建立路由;

1.建立路由

router2.url位址跳轉到account,防止二次載入父元件

<

template

>

<

divclass=''

>

<

router-linkto=

"/account"

>

父元件<

/router-link

>

<

router-view

>

<

/router-view

>

<

/div

>

<

/template

>

<

script

>

export

default

<

/script

>

<

style

lang

='scss'

scoped

>

<

/style

>

C C 中export的定義

windows下的dll linux下的庫或是c 中呼叫c的庫,均可能用到import export。本文討論一種通用的import export巨集定義的使用實踐。如下所示,common.h 定義了可以跨平台的import export巨集定義,something.h 定義了某個類標頭檔案的imp...

Linux中的export用法

exports是設定nfs共享檔案的 linux export命令 功能說明 設定或顯示環境變數。語 法 export fnp 變數名稱 變數設定值 補充說明 在shell中執行程式時,shell會提供一組環境變數。export可新增,修改或刪除環境變數,供後續執行的程式使用。export的效力僅及...

理解make中的export

home student makefile a shell pwd export a all echo a make c tt home student tt makefile b shell pwd all echo a echo b 在 home student下make 結果是什麼呢?home...