vue2.0項目搭建步驟

vue2.0項目搭建步驟

1. 第一步 node環境安裝
   node的下載地址：
   https://nodejs.org/en/ （截止到2018/12/28時可用）

2. 第二步
   下載git 並安裝
   git的下載地址
   https://gitforwindows.org/ （截止到2018/12/28時可用）

3. 第三步
   git 和node 的全局變量配置（這裏不做詳細的配置說明了可以參考
   https://www.cnblogs.com/zhouyu2017/p/6485265.html）

4. 第四步
   安裝vue-cli安裝vue-cli
   使用npm（需要安裝node環境）全局安裝webpack，打開命令行工具輸入：

npm install webpack -g

或者（npm install -g webpack），安裝完成之後輸入 ，

webpack -v

如下圖，如果出現相應的版本號，則說明安裝成功。
注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,所以使用這條命令

npm install webpack webpack-cli -g

然後全局安裝vue-cli

npm install --global vue-cli

安裝完成之後輸入

vue -V

（注意這裏是大寫的“V”），
如下圖，如果出現相應的版本號，則說明安裝成功。
初始化項目

vue init webpack myvue

輸入命令後，會跳出幾個選項讓你回答：

• Project name： 項目名稱
• Project description 項目描述
• Author 作者
• Runtime + Compiler: recommended for most users 運行加編譯
• Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，推薦了第一個
• Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裏就輸入“y”後回車即可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
• 接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
• Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
• Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
  
  5、安裝工程依賴模塊
  進入工程根目錄運行

npm install

6. 運行該項目，測試一下該項目是否能夠正常工作，這種方式是用nodejs來啓動。

npm run dev

然後就可以在瀏覽器裏輸入
http: //localhost:8080
看到我們的vue首頁了