最近在公司用vue.js做了個(gè)移動(dòng)端OA項(xiàng)目啊易，有點(diǎn)感覺(jué)vue2.0的運(yùn)用有點(diǎn)不足吁伺，所以準(zhǔn)備用這次項(xiàng)目的累積及之前的一些理解，寫(xiě)一個(gè)vue系列的博客租谈，鞏固一下自己對(duì)vue的使用篮奄，也希望對(duì)大家有所幫助。
今天從最根本的使用vue-cli構(gòu)建vue項(xiàng)目開(kāi)始寫(xiě)割去，后面相關(guān)的窟却，也會(huì)更新到這篇文章。
vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架呻逆，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目夸赫，GitHub地址是：https://github.com/vuejs/vue-cli
一、安裝node.js
首先需要安裝node環(huán)境咖城，可以直接到中文官網(wǎng) http://nodejs.cn/ 下載安裝包茬腿。
有中文官網(wǎng)還是挺方便的，不用墻什么的
安裝完成后宜雀，可以命令行工具中輸入 node -v 和 npm -v切平，如果能顯示出版本號(hào)，就說(shuō)明安裝成功辐董。
二悴品、安裝vue-cli
安裝好了 node，我們可以用它來(lái)安裝一個(gè)全局 vue-cli：
npm install -g vue-cli
這里會(huì)有一個(gè)老生常談的問(wèn)題，<font color="#dd0000">就是有時(shí)候這種安裝方式比較慢苔严，甚至經(jīng)常失敗定枷，這時(shí)候就推薦使用國(guó)內(nèi)鏡像來(lái)安裝</font>
// 配置鏡像路徑
npm config set registry https://registry.npm.taobao.org
// 直接使用鏡像路徑安裝
npm install -g XXX --registry=https://registry.npm.taobao.org
如果安裝失敗，可以使用 npm cache clean 清理緩存届氢，然后再重新安裝欠窒。
三、生成項(xiàng)目
首先需要在命令行中進(jìn)入到項(xiàng)目目錄悼沈，然后輸入：
vue init webpack vue-project
如果沒(méi)有webpack可以順便裝一個(gè) npm install -g webpack 安裝全局的贱迟，用起來(lái)也方便
其中 webpack 是模板名稱(chēng)，girhub上可以查得到更多的模板絮供，有興趣的可以自己自行度娘
vue-project 是自定義的項(xiàng)目名稱(chēng)，命令執(zhí)行之后茶敏，會(huì)在當(dāng)前目錄生成一個(gè)以該名稱(chēng)命名的項(xiàng)目文件夾
然后啟動(dòng)項(xiàng)目
npm run dev
如果瀏覽器打開(kāi)之后壤靶，沒(méi)有加載出頁(yè)面，有可能是本地的 8080 端口被占用惊搏，需要修改一下配置文件 config>index.js贮乳，
建議將端口號(hào)改為不常用的端口。
四恬惯、打包上線(xiàn)
打包前向拆，我將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因?yàn)榇虬罄叶獠恳?js 和 css 文件時(shí)浓恳，如果路徑以 ' / ' 開(kāi)頭，在本地是無(wú)法找到對(duì)應(yīng)文件的（服務(wù)器上沒(méi)問(wèn)題）碗暗。所以如果需要在本地打開(kāi)打包后的文件颈将，就得修改文件路徑。如上圖
自己的項(xiàng)目文件都需要放到 src 文件夾下言疗，項(xiàng)目開(kāi)發(fā)完成之后晴圾，可以輸入 npm run build 來(lái)進(jìn)行打包工作
打包完成后，會(huì)生成 dist 文件夾噪奄，如果已經(jīng)修改了文件路徑死姚，可以直接打開(kāi)本地文件查看。項(xiàng)目上線(xiàn)時(shí)勤篮，只需要將 dist 文件夾放到服務(wù)器就行了都毒。
五、package.json的配置
如上圖所示叙谨，項(xiàng)目運(yùn)行及打包的命令就在這里設(shè)置的温鸽，還有各種依賴(lài)模塊的列表
如果需要自己再引入一些模塊，可以使用命名
npm install -S xxx
// -S 是--save 的縮寫(xiě)，它可以讓你安裝的模塊記錄到package.json文件當(dāng)中
npm uninstall xxx
npm uninstall -g xxx
// 這是刪除模塊涤垫，也可以刪除全局看模塊
然后就是一個(gè)有時(shí)候會(huì)被誤解的-D姑尺，上面把uninstall提出來(lái)，其實(shí)就是證明這個(gè)-D真的不是刪除
npm install -D xxx
// -D就是--save-dev 這樣安裝的包的名稱(chēng)及版本號(hào)就會(huì)存在package.json的devDependencies這個(gè)里面蝠猬，而--save會(huì)將包的名稱(chēng)及版本號(hào)放在dependencies里面切蟋。
六、proxyTable代理設(shè)置
在不同域之間訪問(wèn)是比較常見(jiàn)榆芦，在本地調(diào)試訪問(wèn)遠(yuǎn)程服務(wù)器柄粹。。匆绣。驻右。這就是有域問(wèn)題。
而且現(xiàn)在一直強(qiáng)調(diào)前后端分離崎淳，項(xiàng)目在初期進(jìn)行的時(shí)候也可以使用proxyTable代理到后臺(tái)服務(wù)器堪夭，方便調(diào)試
使用時(shí)直接 '/api/接口名 就行了
今天就先到這里來(lái)了，該洗洗休息了拣凹。森爽。。（未完待續(xù)）
有時(shí)間下一篇會(huì)在盡快嚣镜，直到這個(gè)系列完結(jié)之前都會(huì)保持更新
