同學們好，今天我們簡單說一下vue.js 3.0的架構搭建方法。
或許有的同學還不知道vue3.0與之前的版本有了哪些改動，可以查查相關資料。主要改動是優化了節點，減少了無謂的周遊，優化速度提升了6倍！
那麼vue-cli3.0架構與之前又有了一些變化，我們簡單說幾個：
1、名字改了，以前叫
vue-cli
@vue/cli
。
2、
build
config
檔案包被移除了。那麼build打封包件，以後會在我們打包的時候自動的生成dist了，一些配置也被優化到了項目當中。config檔案也是同樣如此；
3、新增檔案
public
index.js
public
當中，裡邊除了這個入口檔案外，還把網頁ico圖示存放到這裡；
4、src檔案件下自動幫我們新增了
view
檔案夾，以後就可以直接在這裡放我們的頁面檔案了，也統一了一下大江南北各種奇葩的命名。
5、除了這些，一些插件也有了一些變化，具體我們稍後會代入講解。
6、還有一個比較智能化的增加：
vue ui
。稍後我們再說。
7、運作後增加了Network本地運作網址，好處是開發移動端，我們可以邊開發，邊在手機上看到效果，相容問題一目了然。
-----------------
----- 鋪墊了這麼多，接下來我們開始架構的搭建教程：-----
1、重新安裝3.0
剛才說過了，cli3的腳手架名稱改成了：
@vue/cli
，是以我們就不能覆寫之前的版本了，我們想要用3.0開發新項目，就需要先把以前的解除安裝掉：
解除安裝方法：
npm uninstall vue-cli -g
，
️️蘋果mac本解除安裝需要加上管理者權限，也就是在前邊加上
sudo
sudo npm uninstall vue-cli -g
，回車後需要輸入電腦開機密碼（輸入時是看不到的，輸入完直接Enter鍵就ok）。
下載下傳vue-cli3:
npm install -g @vue/cli // mac本前邊還是一樣，要加sudo ： sudo npm install -g @vue/cli 下載下傳完可以輸入
vue --version
看一下是不是3**的版本。
vue --version
// 3.9.3 2、建立項目
用指令行
vue create 項目名稱
可以建立一個項目架構，項目名稱不要使用駝峰命名。比如我們建立一個名稱為villin的項目：
vue create villin 3、輸入項目配置
建立項目後和以前一樣，會詢問一些配置問題。
️
注意：個别電腦第一次建立時，會詢問是否加速開發工作流，輸入y回車就好。以後就不會再詢問了
首先會讓你選擇一個預設配置preset，如果有配置過會記載上，可以選擇以前配置過的，如圖檔中的name是我之前配置的。
如果沒有會出現兩個配置讓你選擇，一個基本的 Babel + ESLint ，一個是更多配置，我們第一次可以手動選擇更多配置：
鍵盤上下箭頭選擇，回車确認
接着選擇自己想要的配置：我選擇了Babel轉碼，Router、Vuex、CSS Pre-processors、Linter / Formatter格式這四個；
上下箭頭移動，空格選擇，回車确認
接着讓你選擇模式，是否是history模式，因為history模式還需要背景配合，是以本次選擇否。
接着選擇sass模式，我們選擇node-sass，它可以進行時時編譯。
接着選擇ESLint代碼規範，我選擇了第三個，可以進行糾正代碼。
接着選擇什麼時候檢查代碼，我選擇第一個，儲存就檢查。第二個是commit時檢查，不建議。
接下來會詢問配置的存放位置，我們選擇第一個單獨存放。第二個是放在package.json中。
接着詢問是否需要儲存這些配置？
還得即剛剛第一次詢問的預設配置？第一次那個name就是之前儲存的，這次你可以儲存
為這個儲存的配置起個名字：
ok，回車開始運作，稍等片刻，我們這個架構就配置完成，打開就是這個樣紙。
我們可以運作起來
npm run serve 運作後，就是這個樣子的，我們可以将
Local
後的位址放在浏覽器打開就能運作了。
注意看，它比以前多了一個位址
Network
。如果進行移動端開發，在同一個區域網路下，将這個位址放在手機浏覽器中打開，會直接看到開發的效果，也能直接反映出相容性問題，這個對自測來說，非常有用。
關于以前版本怎麼自測，可以參考我之前的文章：
https://yq.aliyun.com/articles/709164?spm=a2c4e.11155435.0.0.2eff3312pboMcM ----- 接下來我們搭建所需要的功能：-----
引入axios
axios
是一個基于 promise 的 HTTP 庫，可以用在浏覽器和 node.js 中。
首先我們需要在這個項目當中，下載下傳axios
npm install axios 在
src
目錄下建立一個
utils
檔案夾，檔案夾中建立一個放axios 的 js檔案，這個名字随便起，要麼
http.js
或者
request.js
都行。我以
http.js
為例，我們來寫一個axios攔截器配置檔案：
如果了解不了axios，建議先去學一學ajax，參考文章：
https://yq.aliyun.com/articles/710192?spm=a2c4e.11155435.0.0.2eff3312pboMcM// http.js 檔案
import axios from 'axios'
// 自定義建立 axios 執行個體
const http = axios.create({
baseURL: process.env.baseURL, // 它可以通過設定一個 `baseURL` 便于為 axios 執行個體的方法傳遞相對 URL
timeout: 10000 // 請求逾時時間
})
// request 添加請求攔截器
http.interceptors.request.use(
config => {
// 在發送請求之前做些什麼可以寫在這個位置
return config
},
error => {
// 對請求錯誤做些什麼在這個位置寫
console.log(error)
Promise.reject(error)
}
)
// response 添加響應攔截器
http.interceptors.response.use(
response => {
// 這裡是收到了response請求，資料一般存放在下邊的data中，是以我們建立一個res，擷取到這個data
const res = response.data
return res
},
error => {
// 這裡放置response傳回錯誤時的邏輯，錯誤碼會放在```status```當中，我們可以進行一些錯誤碼的判斷：
if(error.response){
switch(error.response.status){
case 401:
// 401時的操作
break
case 502:
// 402時的操作
break
case 500:
// 500時的操作
break
// ️注意，這些錯誤碼都是随便舉的例子，具體要和項目當時傳回的數值而定，去和後端确定錯誤碼。
}
}
return Promise.reject(error)
}
)
export default http
以上就是axios的攔截器配置。攔截器用于聯調接口時，傳回各種錯誤問題的攔截，我們可以相應的給到使用者回報，比如登陸密碼錯誤，再比如網絡連接配接失敗等，我們可以根據錯誤碼作出相應的提示。
配置完，我們可以建立一個單獨的
js
檔案，用于統一存放後端接口的。剛才在
utils
中 建立了
http.js
檔案，我們同樣，再次在這個檔案夾中建立一個
api.js
檔案用于存放接口方法，看下目錄結構。
接口就需要引入我們剛剛配置的攔截器，首先我們在 api 檔案中需要引入剛才的檔案。
// api.js檔案
import axios from './http'
// 例如 後端給兩個接口，一個叫 ```/IndexPage``` 的接口，發送的 ```get``` 請求，
// 一個叫 ```/IndexPage/submitTicket``` 的接口，發送的 ```post``` 請求，
// 我們可以定兩個變量名叫“page” 和 “ticket”
// page接口 params接收參數，傳回給接口
page : params => axios.get('/IndexPage', { params }),
// ticket接口
ticket : params => axios.post('/IndexPage/submitTicket', params ),
這樣就聯調了接口。那我們怎麼在頁面中得到接口傳回的資訊呢？我們在需要的界面中按需引入
api.js
，然後擷取到這個資訊，按照promise的方法就可以擷取到資訊：
<template>
<div>
</div>
</template>
<script>
import api from '@/utils/api' // 引入api檔案
export default {
data(){
return{
}
},
methods:{
// 在methods中調用接口
homeApi(){
api.page().then(res => {
// 這裡就是page接口，傳回的資訊，我們可以判斷狀态，成功後傳回接口資訊
if(res.status === 200){
// 當狀态為200時，這裡傳回接口資訊
console.log(res)
}else{
// 如有有錯誤需求，可以在這裡寫
}
})
},
// 如果需要傳參，可以定義一個變量params，把參數放在這裡，然後放在需要的接口中就好。
ticket(){
params{
參數key：參數value
}
api.ticket(params).then(res => {
// 這裡就是page接口，傳回的資訊，我們可以判斷狀态，成功後傳回接口資訊
if(res.status === 200){
// 當狀态為200時，這裡傳回接口資訊
console.log(res)
}else{
// 如有有錯誤需求，可以在這裡寫
}
})
},
}
}
</script>
這樣一個axios就布置完成了
----- 接下來我們做webpack相關的配置和代理：-----
這些配置需要我們建立一個新的檔案，這個檔案名是固定的
vue.config.js
，要求必須和
package.json
檔案同級，也就是最外層。
我們建立一個
vue.config.js
檔案。這個檔案它會被 @vue/cli-service 自動加載，自動識别出内置的配置。
參考官網
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE 在這個檔案裡我們就可以做我們想要做的配置了，舉幾個常見的例子。
// vue.config.js
const path = require('path')
// 封裝打包路徑連方法 根據項目可自己封裝
function join (dir) {
return path.join(__dirname, dir)
}
// 封裝路徑解析方法 根據項目可自己封裝
function resolve (src) {
return path.resolve(__dirname, src)
}
module.exports = {
// 配置test pre等環境；
publicPath: process.env.NODE_ENV === 'production' ? '/自己項目的路徑path/' : '/' //baseUrl從 Vue CLI 3.3 起已棄用，請使用publicPath。
// loader配置,如css loader
css: {
loaderOptions: {
css: {
// 這裡的選項會傳遞給 css-loader
},
postcss: {
// 這裡的選項會傳遞給 postcss-loader
}
}
}
// 跨域proxy配置
devServer: {
'/v4': {
target: 'https://v4/home/', // 對應自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/v4': '/v4'
}
},
}
}
其他配置資訊，官網最全。
項目架構很多中搭配方法，知識也應用到webpack和node，大家可以多多學習。
開始的時候還提到過
vue ui
， 十一個圖形化工具，可以在頁面中建立項目，并且可以搜尋下載下傳各種插件，非常友善。
在指令行中運作
vue ui
即可。
然後彈出頁面後，就可以在其中建立項目，目前在公司中實用性還不算太普及，同學們可以自行操作一邊，了解一下未來前端發展的趨勢也是好的。
這篇文章寫的很累，就先到這裡，發現問題可以及時溝通，最後希望對大家有所幫助。
部落客聯系方式：
e-mail：[email protected]
weChat:VillinWeChat