從17年元旦離開上海項(xiàng)目，到現(xiàn)在已經(jīng)4個(gè)月了。這期間主要心思都在家里面，從老婆懷孕到上個(gè)月生小孩。技術(shù)上基本沒啥進(jìn)展，除了接手一個(gè)ionic+angular 的前端項(xiàng)目，啥新東西也沒學(xué)，Vue 2.X都出了，自己還沒啥也沒用到過，實(shí)屬不該。
這陣子在考慮以后的路，可能會換工作，還是得學(xué)習(xí)點(diǎn)新東西才行了。
之前看過一篇阮一峰老師的全棧工作師培訓(xùn)教程(http://www.ruanyifeng.com/blog/2016/11/javascript.html) ，就想著用Javascript 自己來實(shí)現(xiàn)一個(gè)全棧的項(xiàng)目，慢慢開始動手，這里做一個(gè)記錄，方便自己以后查看。
技術(shù)的話前端肯定是Vue(https://github.com/vuejs/vue) 了，然后配上餓了么出品的Ui框架 Element-ui(http://element.eleme.io/#/zh-CN) ，還有移動版本 (http://mint-ui.github.io/#!/zh-cn)， 后端的話用Node，現(xiàn)在比較常用基于Node技術(shù)的Web框架應(yīng)該是Express，之前打包工具用得也不多，趁此機(jī)會學(xué)習(xí)一個(gè)webpcak。
經(jīng)過幾天的摸索，今天終于動手開始了，一天下來也算有點(diǎn)進(jìn)展。
準(zhǔn)備工作
1，安裝Node(npm)
確保系統(tǒng)已經(jīng)安裝好NodeJs環(huán)境(https://nodejs.org/en/) ，最好安裝最新版本的node。
2，切換npm源
如果你在天朝，最好換一個(gè)npm的淘寶鏡像。
執(zhí)行命令 npm config set registry=http://registry.npm.taobao.org
執(zhí)行完之后 再用 npm info underscore (或者找一個(gè)你熟悉的開源項(xiàng)目)
會打印出關(guān)于underscoreJs的基本信息，后面會有一個(gè)下載地址，如果變成了上面設(shè)置的淘寶鏡像，說明鏡像切換成功了。如果不是，則需要重新執(zhí)行上面的命令了。
進(jìn)入正題
1，Vue-cli安裝
執(zhí)行命令 npm install -g vue-cli
這里如果順利 的話，會很快，如果花了很長時(shí)間沒動靜，請檢查一下網(wǎng)絡(luò)連接，然后再執(zhí)行上面的命令。
如果看到最后輸出的這些，說明vue-cli安裝成功了，這里會將webpcak以及一些打包用的插件，具體可以自己去查看。
2，初始化項(xiàng)目
新建一個(gè)項(xiàng)目目錄
mkdir nodeDemo
cd nodeDemo
然后執(zhí)行 vue init webpack vueDemo
這個(gè)過程會讓輸入一些項(xiàng)目的基本信息，主要注意以下幾個(gè)點(diǎn)：
Project name 最好全小寫;
Install vue-router 安裝yes
Use ESLint to lint your code? 不安裝no 這里我一開始是yes，結(jié)果代碼寫起來特別費(fèi)勁，空格號也檢驗(yàn)，不能多一個(gè)，不能少一個(gè)，這對于我一個(gè)初級菜鳥來說，有點(diǎn)要求過高了，所說這是airbinb的代碼要求。 后續(xù)熟練了可以加上。
后面兩個(gè)是測試方面的東西，個(gè)人覺得有必要，要覺得麻煩后續(xù)加上也行。
這個(gè)時(shí)候，會有一個(gè)vueDemo的項(xiàng)目出現(xiàn)，
包含一些基本的文件及文件夾。
接下來執(zhí)行 npm install
會將項(xiàng)目所依賴的文件下載到項(xiàng)目里面。
執(zhí)行完之后，會打印出上述信息。
然后執(zhí)行 npm run dev
執(zhí)行完成之后，項(xiàng)目會啟動，如果是在windows下，會自動啟動默認(rèn)瀏覽器。
linux下在瀏覽器里面輸入http://xx.xx.xx.xx:8080
如果瀏覽器下面出現(xiàn)這個(gè)頁面，就說明vue-cli+webpack的環(huán)境已經(jīng)搭建好了。
今天就寫了這么多了，明天繼續(xù)。
