官網鏈接 https://cli.vuejs.org/zh/guide/installation.html
一、安裝node
輸入cmd,打開命令提示符 輸入 node -v
如果提示 node不是內部文件等,需要你安裝一下node
參考網址 http://nodejs.cn/download/
安裝教程(注意版本下載)
直接下載
按照步驟安裝
安裝完成后
檢查一下是否安裝了
(npm 是 nodejs的包管理器,用於node插件管理;)
二、安裝vue-cli
>繼續執行命令 npm install -g @vue/cli
等待安裝...
安裝完成后 可以輸入 vue -V 檢查是否成功
如果安裝成功會顯示版本
致此vue 3.x 算是安裝完成了
vue --version 可以檢查是安裝了最新版本
------------------------------------------------------------------混亂分割線-------------------------------------------------------------------------
三、創建項目方法一(命令式)
cd 進入工具項目路徑
@1.如果現在直接創建項目,會有問題,請看展示
>命令輸入 vue create hollo-wd
會提示太慢了,給出建議
原因:訪問是國外服務器,為了提高速度,可以借助國內鏡像,也就是國內自己npm的意思,利用淘寶提供的cnpm
正確步驟是:
@2.先安裝 cnpm
>輸入命令[ npm install -g cnpm -registry=https://registry.npm.taobao.org ]
(注意是輸入整條)
>檢查結果 cnpm -v
--------------------------------------------------------------------------重度混亂分割線-----------------------------------------------------------------------
@3.現在新建項目
>命令輸入 vue create hello
> 回車
>選default
執行成功后
查看結果,發現已經生成了hello文件夾以及生成兩個文件
>不選default
選擇第二種方式,可以根據自己需要配置
生成文件
(詳細可以參考https://www.cnblogs.com/wisewrong/p/9740173.html)
四、創建項目方法二(瀏覽器)
官網還提供另一種友好的方法:在瀏覽器頁面創建項目
命名輸入
>vue ui
會打開一個瀏覽器頁面(如果發現ie不支持,換其他瀏覽器試試),按照頁面指引很簡單
創建好項目app后出來頁面如下圖:
感覺很牛逼,還沒研究好具體功能。
很明顯看到項目的文件多了很多
五、啟動服務器(我理解是)
上面兩種方法都可以創建好項目,發現命令提示如下(app是我的項目)
然后就嘗試執行
>npm run serve
結果如下,從接口進入
執行頁面
下面可以自己開發了。
六.項目重新啟動快捷方式
打開瀏覽器 :http://localhost:8080
如果關掉命令,就會關掉服務器,無法訪問了
>現在進入app文件里面,按住shift 右擊空白處
>選擇打開窗口,如下圖
重新啟動服務器
重新刷新頁面發現可以了。
如果想打開項目管理頁面,直接執行 vue ui
------------------------------------------------------------清醒分割線-------------------------------------------------------------------------------
番外篇:
在安裝過程遇到疑點:
1.vue-cli每次都要啟動服務器才能用嗎?
2.每次創建項目都要這么麻煩的嗎
3.文檔查看,針對舊版本寫比較好有 https://segmentfault.com/a/1190000015680030 ,如果你安裝是舊版本可以參考下。
新版本 參考https://www.cnblogs.com/hezhi/p/10212060.html