vue+node.js學習筆記

標籤：png   技術分享   更改   麵包屑   學習   開發   webp   images   固定   

一、搭建vue開發環境

 vue init webpack newmall 

 cnpm install 

 npm run dev 

二、測試靜態頁

把靜態頁的css拷貝進來

 

src目錄下建立views檔案夾，專門放置頁面。

首先建立一個GoodsList頁面

將靜態html拷貝進來

引入css

更改路由

 

此時 8080連接埠首頁就可以展示商品列表

注意：

引入路徑時候也可以

 import GoodsList from ‘@/views/GoodsList.vue‘ 

@定義的位置在build/webpack.base.conf

在這裡把圖片資源放在根目錄的static下，和css靜態資源的位置不一樣

三、拆分組件

建立compontents檔案夾專門放置組件

將GoodsList頁面的header部分剪下到compontents下的NavHeader.vue檔案裡

此時GoodsList頁面需要

1、引入navheader組件

2、註冊組件

 

3、使用組件

 

四、關於插槽

麵包屑導航內的某個值是不固定的，所以要使用插槽

NavBread頁面

GoodsList頁面

這樣一來，Goods就插入到指定的槽位了。

 

vue+node.js學習筆記