Hello，大家好，接下來我會以這個項目為基礎更新一系列的文章，但是每天只更新一點、也只學一點，目的希望大家利用工作學習之余的碎片時間通過這個項目來學習vue和node等知識點。愛掏網 - it200.com希望大家都一起參與進來，動手實踐，有什么問題都可以在留言或私信我一起討論學習。愛掏網 - it200.com文章中有什么錯誤也歡迎大家留言指出，共同學習，一起進步，早日走上人生巔峰。愛掏網 - it200.com
一、git倉庫
1、開始前我先在github上創建了一個倉庫，大家可以fork這個倉庫：商城mall；以此倉庫為核心，我會把每天新完成的代碼提交上去更新，一直到大家一起把這個項目做完；大家fork完以后可以同步我的倉庫查看或者在我的倉庫上直接做修改，有問題也可以提issue。愛掏網 - it200.com
2、大家在github上建一個自己的項目，自己動手親自寫一遍，有問題可以查看fork的核心倉庫，也可以在群里一起討論解決問題。愛掏網 - it200.com
好了，廢話不多說了，今天的內容很簡單，就是把前期的準備工作做好，環境搭好，為我們后面的項目做準備。愛掏網 - it200.com
二、安裝node環境
去官網上根據自己的電腦環境下載對應的版本；然后傻瓜式的點下一步完成完成即可，然后打開命令行輸入：
安裝成功
如果顯示版本號了就證明你安裝成功了。愛掏網 - it200.com具體你可以移步我的簡書一篇關于node的詳細安裝步驟。愛掏網 - it200.com
三、用腳手架搭建一個基于webpack的vue項目
1、命令輸入
安裝的步驟官網已經寫得十分詳細了，我就照搬過來了：
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev
2、含義
安裝過程中出現的命令行是什么意思呢？我簡單解釋下，從上到下依次的含義為：
- 項目的名字是什么？ 我們這里選默認的
myproject - 項目的描述？ 默認
- 項目的作者？
- 是否使用路由
v-router？ 我們選yes - 是否使用
ESLint語法校檢？ 我們選n
( ps：ESLint語法校檢工具可以幫你養成良好的編碼習慣、規范的格式，但是每個人習慣不同，會很繁瑣，所以前期我們選擇不安裝。愛掏網 - it200.com) - 后面
unit tests、e2e tests都是測試等相關，這里我們不于安裝。愛掏網 - it200.com
搭建vue項目
3、安裝完成，我們進入項目啟動編譯
新的vue-cli腳手架構建一個新的項目的時候，連依賴都一起幫你安裝好了，也就是不用進入項目后使用npm install安裝依賴了，幫我們省略了一個npm install的步驟。愛掏網 - it200.com
（1）好，現在我們進入項目，npm run啟動編譯：
啟動編譯
編譯完成
（2）現在我們進入瀏覽器中輸入http:localhost:8080就可以看到一個初始化的vue項目
項目搭建完成
四、其它
因為某些總所周知的原因，如果你老是用npm安裝失敗，可能你先需要先安裝一個cnpm鏡像。愛掏網 - it200.com
參考學習
https://nodejs.org/en/
https://github.com/Ewall1106/mall
https://cn.vuejs.org/v2/guide/installation.html
https://www.jianshu.com/nb/14505636