所使用的工具:谷歌瀏覽器、Nodejs(自帶npm)、HBuilder
0、要先安裝Nodejs,下載安裝即可
0-1、安裝vue-cli,打開cmd 輸入 npm install -g @vue/cli 安裝cli服務,安裝完后,我們就有一個vue命令可以被調用了。
1、使用 vue 命令 創建一個項目
回車。
回車。
等待創建完成。
2、項目創建完成,切入到項目中
3、然后增加一些UI的支持(我這里演示使用的是 iView 你也可以使用 ElementUI)
回車。
回車。
回車。然后等待..........
安裝完成。
4、增加 router 支持。
先輸入 vue add router 然后回車。
回車。
然后等待安裝..........
安裝完成。
5、開啟項目的服務。
5.1 輸入 npm run serve 然后回車。
服務開啟成功。
6、在瀏覽器輸入http://localhost:8080/
這樣就可以訪問到我們的項目主頁面了。
注意:V 圖標上面有 Home 和 About 點擊可以進行換頁面。(這里使用到了router,這是我們裝router的時候,它自動給我們做了一個演示的例子)
7、我們來編碼一下。
打開目錄
去到HelloWord.vue 進行一個頁面編碼。
將里面的東西全部去掉,然后去iView官網找一個組件來使用。地址:https://www.iviewui.com/components/layout
使用這個布局吧。
復制這個布局的演示代碼。
粘貼到HelloWord.vue中。(保存)
8、主頁面就變成這這樣子了。
7、將App.vue文件中的代碼編碼為:
主頁面就改變了。
8、修改Home.vue文件的代碼(修改完成記得保存)
9、去HolleWord.vue編寫一些代碼
10、改變通過 to 得到的組件信息
11、動態路徑參數(router.js)
通過 this,$route.params(得到的是一個數組)的方法取出。
運行結果:
vue-router詳細使用的地址:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.htm
本次示例下載地址:https://github.com/oukele/router-demo
堅持就是勝利,加油!!!