vue前端項目搭建和要點記錄

vue-cli2和vue-cli3（vue-cli4）的一些區別

據我目前的瞭解，創建vue項目，vue-cli不是必須的，但是在實際開發時，幾乎就是必須的。vue-cli既可以看做是一種創建vue項目的快捷工具，也可能理解成是vue的一種規範。
由於本機的vue-cli安裝較早，還是vue-cli2的版本，而如今早已經是vue-cli4，所以也是時候進行一定的升級了，升級過程以及升級之後的部分區別記錄如下：

vue-cli安裝

v2：npm i -g vue-cli
v3/v4：npm i -g @vue/cli

創建項目

v2：vue init projectName
v3/v4：vue create projectName

啓動項目

v2：npm run dev
v3/v4：npm ren serve

端口修改

vue-cli創建的項目，默認端口號是8080，一般正式開發都不會直接使用這個默認端口號，瞭解java後端開發的就會知道，tomcat的默認端口號也是8080，通常也一樣都需要修改一下。
在vue-cli2中，端口號修改起來可能相對更簡單，直接在項目的config目錄下能找到index.js文件，然後修改裏邊的port屬性即可。
但是vue-cli3創建的項目整體結構不同，也沒有了config目錄，他的端口號修改顯得比較隱蔽，需要一層層找到如下文件，然後修改裏邊的端口號：
node_modules@vue\cli-service\lib\commands\serve.js

const defaults = {
  host: '0.0.0.0',
  port: 8080,
  https: false
}

vue的一些基礎用法

組件安裝

在我目前的需求中，除開創建項目時選擇的router之外，已知需要的就還有axios和vant的組件依賴。對於技術選型，axios用來在vue中進行ajax請求，vant用作ui設計。
作爲後端爲主的前端菜鳥，現在用過的ui技術只有element-ui、bootstrap、vant，有的還只是用了一兩下，早就忘到了千里之外，所以這次也是希望可以選擇一個主修，最終就鎖定在了vant上。
組件安裝命令如下：

cnpm i vant -S
cnpm i axios  -S
cnpm i babel-plugin-import -D

上邊最後一個的作用是爲了vant的組件按需引入，查看vant官網會有說明。
額外提一點的就是，安裝了cnpm之後，安裝起依賴確實比之前的npm快了非常非常多，尤其是如今身在農村之能手機熱點聯網的情況下。

組件使用

組件的安裝我理解爲就是java裏邊maven下載jar包，那麼和java一樣，在使用的地方也需要引入。
axiox的引入，是在main.js中：

import axios from 'axios'
Vue.prototype.$http=axios

就目前的理解，上邊的代碼，第一行是必要的，第二行不是必須，寫法也不一定非要這樣，應該是一種習慣。我跟着教程學，也就按照這樣寫了。

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);

這個地方我其實還不是太明白，因爲一開始ui組件的引用也放在了main.js中，但是頁面卻不顯示，挪到了index.js中之後就可以正常使用，希望在後續學習和敲代碼應用的過程中能進一步弄清楚。

組件（component）和視圖（view）的區別

在vue-cli3或者vue-cli4中，項目目錄有components和views這兩個目錄，就目前的理解來說，裏邊的代碼用法基本一樣。
view可能更側重於整體的頁面，而compenent則是零散的局部的一些，從一開始的學習中來說，可以儘量規範的劃分，但是也可以都放在一個目錄下，並不影響實際的功能。

關於this和_this

this是一個關鍵字，代表的是當前對象，在java中也是有的。
而vue中的this，有一個用法可能需要記錄，那就是在某些地方使用之前可能需要把this先賦值給另一個變量，比如_this。
_this應該是一個普遍的寫法，卻不是硬性的規定，也可以叫其他的名字。
它的出現，是因爲在一個視圖或者組件中，可能會有非常多的對象，比如點擊事件等，這時候很容易分不清當前的this代表的是哪個，從而加大錯誤率和調試難度。

靜態資源

不論是真是項目，還是學習時的demo，總是少不了一些靜態資源，在vue-cli4中，靜態資源需要一般放在public目錄下，例如可以在public下創建一個css文件夾存在css樣式文件，可以在public下創建一個img文件夾存在圖片等資源，也可以創建一個json目錄存放模擬數據的json文件。
當然了，這些命名都不是必須的，也都可以自定義，只要使用的時候保持一致即可。

使用axios進行http請求

http請求有get、post、put等，最長用的是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);
})

以上是基礎用法，也是單請求的簡單示例，但實際上很多時候一個功能的最終結果是需要多個請求處理後才能實現，這就還需要藉助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單請求，還是合在一起的複合請求，都用到了$http，可能會有人有疑問。這裏實際上是因爲上邊所說的引入了axios後，加了Vue.prototype.$http=axios這一行，所以這裏$http代表的就是axios，也算是一種習慣性寫法。

項目地址

項目代碼和文檔均以github託管，地址如下：
https://github.com/tuzongxun/tzxblog

本文由博客羣發一文多發等運營工具平臺 OpenWrite 發佈