1. 程式人生 > >vue - router 的使用(簡單例子)

vue - router 的使用(簡單例子)

alt 調用 創建 png 圖片 http builder .com 谷歌瀏覽器

所使用的工具:谷歌瀏覽器、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、使用HBuilder 打開項目,進行編寫代碼。

vue - router 的使用(簡單例子)