vue項目實戰~編寫商城項目（0）~軟件安裝

做項目前先把相關軟件安裝完畢，軟件安裝包括
node
webpack
vue-cli
Git
安裝包整合在此
鏈接：https://pan.baidu.com/s/1AIfAC9-nhqIBlcUCFH_MSw
提取碼：dd36

1、node安裝

運行在服務端的 JavaScript，讓JavaScript可以做後端程序員的時，編寫自己的服務端，在使用Vue腳手架編寫程序時需要用到node的環境，所以這裏需要安裝下，安裝十分簡單，直接運行node-v10.16.2-x64.msi即可，當然注意他的安裝位置，安裝完成後，打開控制檯（菜單按鍵+r然後輸入cmd然後回車）輸入命令

node -v

如果有就會輸出node版本號，沒有的話說明安裝錯誤，需要重新安裝

npm：全稱爲Node Package Manager，是一個基於Node.js的包管理器，也是整個Node.js社區最流行、支持的第三方模塊最多的包管理器(類似於java中的Maven)。安裝Node後會包含npm，在控制檯敲

npm -v

查看是否提示版本信息，沒有的話需要重新安裝，然後開始下一步

在安裝下面的一些組件的時候可能由於網絡問題，下載緩慢，所以你可以使用國內的淘寶鏡像來安裝，當然也可以不用
安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成後驗證：cnpm -v
如果使用淘寶鏡像的方式安裝軟件，注意命令就是cnpm開始的，例如下面的

npm install webpack -g  需要改成
cnpm install webpack -g

以此類推，都是這樣。

2、webpack安裝

webpack一個打包工具，主要作用是把一些不能直接運行的擴展語言打包成瀏覽器可以使用的格式，所以這裏需要安裝下，打開控制檯，運行下面命令：

npm install webpack -g

3、開始安裝VUE

運行下面的命令在控制檯

npm install vue-cli -g
安裝完成後輸入驗證安裝是否完成（V是大寫）
vue -V 

4、安裝Git

Git，是一個開源的分佈式版本控制系統，主要用於管理項目版本，雙擊安裝包Git-2.23.0-64-bit.exe即可，注意安裝位置

5、webstorm安裝

是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽爲“Web前端開發神器”，進入下載包，進行安裝，雙擊進入壓縮包webstorm2019pj_downcc.com，找到WebStorm2019.1_downcc.com.exe可執行文件，雙擊開始安裝，安裝完成後開始選擇自己喜歡的風格（建議選黑色），和相關組件。


然後選擇下面的start繼續進行
選擇完成後開始破解工具，破解前修改hosts文件，
1、在C:\Windows\System32\drivers\etc下有一個hosts文件，在文件底部增加
0.0.0.0 account.jetbrains.com
0.0.0.0 www.jetbrains.com
2、然後選擇中間的那個選項，填入下面的註冊碼

註冊碼:

4RULSIH54N-eyJsaWNlbnNlSWQiOiI0UlVMU0lINTROIiwibGljZW5zZWVOYW1lIjoiMjA5OSAxODExIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJBQyIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IkRQTiIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IlBTIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiR08iLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IkNMIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiUlMwIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiUkMiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJSRCIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IlBDIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiUk0iLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAxOS0xMS0yNyJ9LHsiY29kZSI6IkRCIiwicGFpZFVwVG8iOiIyMDE5LTExLTI3In0seyJjb2RlIjoiREMiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifSx7ImNvZGUiOiJSU1UiLCJwYWlkVXBUbyI6IjIwMTktMTEtMjcifV0sImhhc2giOiIxMTA3MzgwNy8wIiwiZ3JhY2VQZXJpb2REYXlzIjowLCJhdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlLCJpc0F1dG9Qcm9sb25nYXRlZCI6ZmFsc2V9-rlH9JbPzbld/Oak51Co3HlhD6xgE7CsvbrLl6RCySuv2sw37KBfDPY1PT2lAEkW0MJkUtGtmSHVp/jk8F4RuHGvouJFMdCtnsKdnebdjaPsKpjgxoreWlOu8VCnrGh+3mmuswzGKouw52ffxbmsvGFa5ybvWv7mj9gqSY0V20OcgCmIT3dlj4f9xc0iA9o7z1pvedVzcOrxVKvLmmqRp+4zMfNuMQB5sraznW9BxslR1sWN0pUOu9/J+k7IH6Wld/oGv5dtHYFqk5RinSBMTjYlZ+X4AV5f83Z4SkzbHqy2fGC6S3NoifaVFxRSP5TQDe6hsg7Fzic6k1iWAup89pg==-MIIElTCCAn2gAwIBAgIBCTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE4MTEwMTEyMjk0NloXDTIwMTEwMjEyMjk0NlowaDELMAkGA1UEBhMCQ1oxDjAMBgNVBAgMBU51c2xlMQ8wDQYDVQQHDAZQcmFndWUxGTAXBgNVBAoMEEpldEJyYWlucyBzLnIuby4xHTAbBgNVBAMMFHByb2QzeS1mcm9tLTIwMTgxMTAxMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQAF8uc+YJOHHwOFcPzmbjcxNDuGoOUIP+2h1R75Lecswb7ru2LWWSUMtXVKQzChLNPn/72W0k+oI056tgiwuG7M49LXp4zQVlQnFmWU1wwGvVhq5R63Rpjx1zjGUhcXgayu7+9zMUW596Lbomsg8qVve6euqsrFicYkIIuUu4zYPndJwfe0YkS5nY72SHnNdbPhEnN8wcB2Kz+OIG0lih3yz5EqFhld03bGp222ZQCIghCTVL6QBNadGsiN/lWLl4JdR3lJkZzlpFdiHijoVRdWeSWqM4y0t23c92HXKrgppoSV18XMxrWVdoSM3nuMHwxGhFyde05OdDtLpCv+jlWf5REAHHA201pAU6bJSZINyHDUTB+Beo28rRXSwSh3OUIvYwKNVeoBY+KwOJ7WnuTCUq1meE6GkKc4D/cXmgpOyW/1SmBz3XjVIi/zprZ0zf3qH5mkphtg6ksjKgKjmx1cXfZAAX6wcDBNaCL+Ortep1Dh8xDUbqbBVNBL4jbiL3i3xsfNiyJgaZ5sX7i8tmStEpLbPwvHcByuf59qJhV/bZOl8KqJBETCDJcY6O2aqhTUy+9x93ThKs1GKrRPePrWPluud7ttlgtRveit/pcBrnQcXOl1rHq7ByB8CFAxNotRUYL9IF5n3wJOgkPojMy6jetQA5Ogc8Sm7RG6vg1yow==

6、安裝完成

截止到這裏，相關軟件就全部安裝完成了，打開webstorm後選擇新建項目，選擇創建Vue項目，接下來一路next即可，注意選擇自己的項目名

7、遇到異常

failed to download repo vuejs-templates/webpack
環境安裝有問題，以此在控制檯敲打命令看出現的內容
檢查node安裝是否正常

1.node -v

檢查Vue安裝是否正常

2.vue -V (沒有顯示版本，npm i vue-cli -g)

檢查webpack安裝是否正常

3.webpack -v(需要重新安裝,npm install webpack -g)

上述安裝步驟錯誤的話請在評論下方留言