vue-cli2和vue-cli3（vue-cli4）的一些區(qū)別
據(jù)我目前的了解振定，創(chuàng)建vue項(xiàng)目必怜，vue-cli不是必須的，但是在實(shí)際開發(fā)時(shí)后频，幾乎就是必須的梳庆。vue-cli既可以看做是一種創(chuàng)建vue項(xiàng)目的快捷工具，也可能理解成是vue的一種規(guī)范卑惜。
由于本機(jī)的vue-cli安裝較早膏执，還是vue-cli2的版本，而如今早已經(jīng)是vue-cli4露久，所以也是時(shí)候進(jìn)行一定的升級(jí)了更米，升級(jí)過程以及升級(jí)之后的部分區(qū)別記錄如下：
vue-cli安裝
v2：npm i -g vue-cli
v3/v4：npm i -g @vue/cli
創(chuàng)建項(xiàng)目
v2：vue init projectName
v3/v4：vue create projectName
啟動(dòng)項(xiàng)目
v2：npm run dev
v3/v4：npm ren serve
端口修改
vue-cli創(chuàng)建的項(xiàng)目，默認(rèn)端口號(hào)是8080毫痕，一般正式開發(fā)都不會(huì)直接使用這個(gè)默認(rèn)端口號(hào)征峦，了解java后端開發(fā)的就會(huì)知道迟几，tomcat的默認(rèn)端口號(hào)也是8080，通常也一樣都需要修改一下栏笆。
在vue-cli2中类腮，端口號(hào)修改起來可能相對(duì)更簡(jiǎn)單，直接在項(xiàng)目的config目錄下能找到index.js文件竖伯，然后修改里邊的port屬性即可存哲。
但是vue-cli3創(chuàng)建的項(xiàng)目整體結(jié)構(gòu)不同，也沒有了config目錄七婴，他的端口號(hào)修改顯得比較隱蔽祟偷，需要一層層找到如下文件，然后修改里邊的端口號(hào)：
node_modules@vue\cli-service\lib\commands\serve.js
const defaults = {
host: '0.0.0.0',
port: 8080,
https: false
}
vue的一些基礎(chǔ)用法
組件安裝
在我目前的需求中打厘，除開創(chuàng)建項(xiàng)目時(shí)選擇的router之外修肠，已知需要的就還有axios和vant的組件依賴。對(duì)于技術(shù)選型户盯，axios用來在vue中進(jìn)行ajax請(qǐng)求嵌施，vant用作ui設(shè)計(jì)。
作為后端為主的前端菜鳥莽鸭，現(xiàn)在用過的ui技術(shù)只有element-ui吗伤、bootstrap、vant硫眨，有的還只是用了一兩下足淆，早就忘到了千里之外，所以這次也是希望可以選擇一個(gè)主修礁阁，最終就鎖定在了vant上巧号。
組件安裝命令如下：
cnpm i vant -S
cnpm i axios -S
cnpm i babel-plugin-import -D
上邊最后一個(gè)的作用是為了vant的組件按需引入，查看vant官網(wǎng)會(huì)有說明姥闭。
額外提一點(diǎn)的就是丹鸿，安裝了cnpm之后，安裝起依賴確實(shí)比之前的npm快了非常非常多棚品，尤其是如今身在農(nóng)村之能手機(jī)熱點(diǎn)聯(lián)網(wǎng)的情況下靠欢。
組件使用
組件的安裝我理解為就是java里邊maven下載jar包，那么和java一樣铜跑，在使用的地方也需要引入门怪。
axiox的引入，是在main.js中：
import axios from 'axios'
Vue.prototype.$http=axios
就目前的理解疼进，上邊的代碼薪缆，第一行是必要的秧廉，第二行不是必須伞广，寫法也不一定非要這樣拣帽，應(yīng)該是一種習(xí)慣。我跟著教程學(xué)嚼锄，也就按照這樣寫了减拭。
vant的引入，和axios不太一樣区丑，不是main.js拧粪，而是router目錄中index.js下：
import { Tab, Tabs } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Tab);
Vue.use(Tabs);
這個(gè)地方我其實(shí)還不是太明白，因?yàn)橐婚_始ui組件的引用也放在了main.js中沧侥，但是頁面卻不顯示可霎，挪到了index.js中之后就可以正常使用，希望在后續(xù)學(xué)習(xí)和敲代碼應(yīng)用的過程中能進(jìn)一步弄清楚宴杀。
組件（component）和視圖（view）的區(qū)別
在vue-cli3或者vue-cli4中癣朗，項(xiàng)目目錄有components和views這兩個(gè)目錄，就目前的理解來說旺罢，里邊的代碼用法基本一樣旷余。
view可能更側(cè)重于整體的頁面，而compenent則是零散的局部的一些扁达，從一開始的學(xué)習(xí)中來說正卧，可以盡量規(guī)范的劃分，但是也可以都放在一個(gè)目錄下跪解，并不影響實(shí)際的功能炉旷。
關(guān)于this和_this
this是一個(gè)關(guān)鍵字，代表的是當(dāng)前對(duì)象惠遏，在java中也是有的砾跃。
而vue中的this，有一個(gè)用法可能需要記錄节吮，那就是在某些地方使用之前可能需要把this先賦值給另一個(gè)變量抽高，比如_this。
_this應(yīng)該是一個(gè)普遍的寫法透绩，卻不是硬性的規(guī)定翘骂，也可以叫其他的名字。
它的出現(xiàn)帚豪，是因?yàn)樵谝粋€(gè)視圖或者組件中碳竟，可能會(huì)有非常多的對(duì)象，比如點(diǎn)擊事件等狸臣，這時(shí)候很容易分不清當(dāng)前的this代表的是哪個(gè)莹桅，從而加大錯(cuò)誤率和調(diào)試難度。
靜態(tài)資源
不論是真是項(xiàng)目烛亦，還是學(xué)習(xí)時(shí)的demo诈泼，總是少不了一些靜態(tài)資源懂拾，在vue-cli4中，靜態(tài)資源需要一般放在public目錄下铐达，例如可以在public下創(chuàng)建一個(gè)css文件夾存在css樣式文件岖赋，可以在public下創(chuàng)建一個(gè)img文件夾存在圖片等資源，也可以創(chuàng)建一個(gè)json目錄存放模擬數(shù)據(jù)的json文件瓮孙。
當(dāng)然了唐断，這些命名都不是必須的，也都可以自定義杭抠，只要使用的時(shí)候保持一致即可脸甘。
使用axios進(jìn)行http請(qǐng)求
http請(qǐng)求有g(shù)et、post偏灿、put等斤程，最長(zhǎng)用的是get和post，這里就先以此記錄axios的語法：
this.$http.get(url,{params:{paramName:paramValue}}).then(function(res){
console.log(res);
})
this.$http.post(url,{data:{paramName:paramValue}}).then(function(res){
console.log(res);
})
以上是基礎(chǔ)用法菩混，也是單請(qǐng)求的簡(jiǎn)單示例忿墅，但實(shí)際上很多時(shí)候一個(gè)功能的最終結(jié)果是需要多個(gè)請(qǐng)求處理后才能實(shí)現(xiàn)，這就還需要借助spread：
this.$http.all([this.$http.post(url1),this.$http.get(url2)]).then(
this.$http.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}
)
);
以上不論是get沮峡、post單請(qǐng)求疚脐，還是合在一起的復(fù)合請(qǐng)求，都用到了$http邢疙，可能會(huì)有人有疑問棍弄。這里實(shí)際上是因?yàn)樯线吽f的引入了axios后，加了Vue.prototype.$http=axios這一行疟游，所以這里$http代表的就是axios呼畸，也算是一種習(xí)慣性寫法。
項(xiàng)目地址
項(xiàng)目代碼和文檔均以github托管颁虐，地址如下：
https://github.com/tuzongxun/tzxblog
本文由博客群發(fā)一文多發(fā)等運(yùn)營工具平臺(tái) OpenWrite 發(fā)布
