最詳細的vue-cli工具構建vue項目教程

最詳細的vue-cli工具構建VUE項目教程

1、安裝node環境

1. 進入node 官網下載安裝 網址 https://nodejs.org/zh-cn/ 2. 默認安裝（安裝在C盤） 3. 安裝完成後 win+R 鍵 在運行當中輸入 cmd 打開window命令行工具 4. 在命令行工做中輸入 npm -v (-v前有一個空格) 顯示版本號則表示安裝成功

2、安裝git

1. 打開連接 https://git-scm.com/downloads 2. 點擊 Download 2.16.2 for Windows 按鈕下載 3. 默認安裝

3、安裝 vue-cli構建工具

1、win+R 鍵運行cmd 2、在命令工具中輸入 npm install vue-cli -g （-g表示全局）

4、用vue-cli來建立vue項目

1. 在cmd中進入想要放置項目的目錄 2. 在命令行工具中輸入  vue init webpack 項目名稱  例如：vue init webpack abc 就會建立一個abc的項目（文件夾） 會出現一個「 ? Project name <abc> 」 3. 注意：項目名不要以數字或大寫字母開頭，會出現錯誤

4. 如下是建立項目的時候提示配置的內容：

？ Project name: 設置項目名稱 你能夠隨便取一個（能夠直接回車確認） ？ Project desciprtion: 設置項目的描述內容 隨便寫（能夠直接回車確認） ？ Author：設置開發者 能夠隨便寫（能夠直接回車確認） -> runtime + compiler：recommended for most users（選擇這個按回車確認） Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-Router? （選y） ? Use Eslint to link your code ? 使用使用ESlint來檢測你的代碼規範，不規範會報錯（初學者建議選n） ? SET up unit test ? （選n） ? Setup e2e tests with Nightwatch? 選n ? Should we run `npm install` for you after the project has been created? (recommended) -> Yes, use NPM (選擇這個用npm 來加載項目) Yes, use Yarn No, I will handle that myself 

5、執行安裝依賴

1. cmd中進入到新建立的項目目錄 2. 執行 npm install（新版本可省去此步驟） 

6、運行項目

在cmd中輸入npm run dev