路由 vue cli 元件

2021-10-09 17:15:40 字數 1333 閱讀 9271

動態路由

巢狀路由

可以在cookies裡面更改資訊:個人使用者資訊。

是vue框架的乙個工具。

1.安裝:

npm install -g @vue/cli

是node.js的包管理工具,和npm功能相同,但是比npm 功能更強,速度更快

安裝yarn: cnpm i -g yarn

2.檢查其版本是否正確

vue --version

建乙個名字lmy的vue檔案專案 :

vue create lmy

然後對應配置選項

一路回車

元件四步走:

1.建立元件 : 建單檔案元件元件名.vue

<

/template>

export

default

<

/script>

<

/style>

2.引入元件:在父元件或路由配置檔案引入

import  自定義元件配置物件名  from    『vue組建路徑』 import house  from

'./components/house'

```

3.註冊元件 或者 配置到路由

註冊:

components:

配置路由:

4.使用元件標籤.

將組建標籤寫在父元件的template裡

node.js模組化

es6模組化:

匯出 :

export

default 值

export

default (x,y)=>

匯入

import 模組變數名 from

'模組路徑'

import sum from

'模組路徑'

vue cli巢狀路由

很多人在路由巢狀這個部分就很是搞不清楚,下面我講一下在vue cli中路由的巢狀。我們在這個資料夾中定義路由規則 index.js 詳情 第一步 引入 vue router,引入相關元件。第二步 例項化路由並且export default匯出 第三部 建立路由規則 父路由的路徑 就是專案一啟動就呼叫...

Vue cli中的元件

vue cli的元件都寫在專案資料夾下的 src 資料夾下的 components 下,每個元件單獨乙個 vue 檔案。每個元件檔案都包含 模版 template 元件引數 元件樣式 style 模版 template template 元件引數 script export default scri...

vue cli配置靜態路由 vue router

涉及檔案 router目錄下index.js和staticrouter.js,以及入口檔案main.js 一 staticrouters.js中 如下 為了方便管理,靜態路由的配置在單獨檔案管理 引入元件寫法一 const index 引入元件寫法二 const index function 引入元...