1. 程式人生 > >vue.js環境配置--vue-cli

vue.js環境配置--vue-cli

  這兩天學習vue.js,由於第一次學習類似框架,所以遇到了配置環境的一些問題 ,經過各種嘗試終於解決

---------------------------------------

說明:  本文主要介紹vue-cli 的安裝

             對於webpack 我嘗試了幾次 沒有安裝成功 所以 改為了vue.js官網中介紹的vue-cli

-----------------------------------------------------

第一步 

         1. 安裝 npm

                    建議 可以去node官網下載安裝node  只要安裝好node就自帶安裝好了npm  node安裝非常簡單 一路下一步就可以了 

點選開啟連結

                    ps: 如果你是window系統 還需要下載安裝 git bash    點選開啟連結

         2. 開啟 git bash

                  1. 檢查node 和 npm 是否安裝成功

                           輸入 node -v 

                          

                         輸入 npm -v

                                

                   2. 安裝 vue

                               //採用全域性安裝

                                  npm install -g vue-cli

                             ps:由於需要訪問國外網站所以時間可能比較長

                             安裝完成後輸入  vue

                               

               3.建立一個基於 ‘webpack’模板的新專案

                           vue  init webpack  first-project                           //  webpack方法打包  建立一個新檔案 first - project 

                          ps: 在輸入上述命令時 可以先改變當前位置 將檔案建立到你需要的地方

                                          先輸入  cd

                                           然後輸入 cd f:    

                                          再輸入  cd  web/vue                     即進入了f盤的web資料夾裡的vue資料夾裡    最終生成的first -project資料夾就在vue資料夾內

                         執行指令後 會要讓你確定專案的一些配置

                               project name    直接回車

                               descriptions     輸入描述你專案的文字 英文

                             author      輸入作者名字 隨便填

                            後面出現幾個要你輸入(y/n)的指令  全部輸入n                      

                            最後剩下的如果出現全部回車   最後就建立成功了

                         我們 可以開啟vue 裡面就會出現 建立的檔案

                           也可以輸入命令   cd   first-project  回車 輸入  ls

                             

                         則會出現檔案內的一些內容

         4  安裝依賴     

                          直接安裝在first-project 下

                          npm    install  

                           安裝後文件裡出現了 node-modules 檔案

        5 執行  npm run dev

                  成功後會出現一個監聽埠  http://localhost:8080     訪問這個就可以看到vue.js的歡迎介面

     6  至此安裝完成 

              ps; 由於npm 訪問速度太慢 所以你可以安裝淘寶的映象 cnpm  具體如何安裝請自行百度       點選開啟連結

-------------------------------------------------

本文參考自網上各種安裝方法     如有侵權請告知

----------------------------------------------------