CLI 2和CLI 3第一個區(qū)別是npm包的包名，CLI 3并沒有沿用CLI 2的vue-cli，而是另起為@vue/cli。創(chuàng)建項目方面也發(fā)生了變化，CLI 2 可以選擇根據(jù)模板初始化項目，而CLI 3并未重新開發(fā)模板，如果開發(fā)者想要像CLI 2一樣使用模板初始化項目，可全局安裝一個橋接工具@vue/cli-init。
安裝 vue-cli3
如果已經(jīng)安裝過vue-cli2，按以下指令卸載：
npm uninstall vue-cli -g
安裝vue-cli3：
npm install -g @vue/cli
Vue CLI 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli
你可以使用 vue serve 和 vue build 命令對單個 *.vue 文件進(jìn)行快速原型開發(fā)，不過這需要先額外安裝一個全局的擴(kuò)展：
npm install -g @vue/cli-service-global
創(chuàng)建 vue項目
vue create hello-world
創(chuàng)建時建議選擇手動去勾選配置，帶*建議勾選：
- (*)Babel （轉(zhuǎn)換es6）
- (*)router （路由）
- (*)vuex
- (*)less
- linter / formatter （一個語法規(guī)則和代碼風(fēng)格的檢查工具，可以檢測出你代碼中潛在的問題，可以保證寫出語法正確和風(fēng)格統(tǒng)一的代碼），lint有兩種檢查時機(jī)，一是用戶保存文件的時候，二是用戶提交文件到git的時候。選擇Lint on save。
- ESLint with error prevention only —— 只檢測錯誤。
- ESLint + Airbnb config —— 幾乎涵蓋了JavaScript的各個方面。
- ESLint + Standard config —— 自帶linter和自動代碼糾正，自動格式化代碼。
- ESLint + Prettier —— 統(tǒng)一整個團(tuán)隊的代碼風(fēng)格。
- 把Babel、ESLint等配置信息全放在package.json文件里呢，還是單獨文件管理？ => 單獨管理。
++這樣創(chuàng)建出來的項目結(jié)構(gòu)里，比起cli2，少了build和config文件，更為簡潔易懂。++
載入插件
-
使用圖形化界面
在你安裝好了CLI 3的前提下，執(zhí)行
vue ui命令 ，會自動在瀏覽器打開圖形界面。先導(dǎo)入項目，再搜索要裝的插件，直接安裝即可，安裝好的插件，在
\src\plugins目錄下統(tǒng)一管理，在main.js中只需要引入plugins文件即可。 -
按需引入
借助插件 babel-plugin-import可以實現(xiàn)按需加載組件，減少文件體積。首先安裝，并在文件 .babelrc 中配置：
ps: 這里以iview為例子~
npm install iview --save npm install babel-plugin-import --save-dev // .babelrc { "plugins": [ ["import", { "libraryName": "iview", "libraryDirectory": "src/components" }] ] } // 找不到 .babelrc，在babel.config.js中配置 module.exports = { plugins: [ ['import', { libraryName: 'iview', libraryDirectory: 'src/components' }] ] }; //main.js import 'iview/dist/styles/iview.css'; // 再按需引入 import { Button, Table } from 'iview'; Vue.component('Button', Button); Vue.component('Table', Table);
環(huán)境變量配置
npm run serve => process.env.NODE_ENV = 'development'
npm run build => process.env.NODE_ENV = 'production'
- package.json中
"scripts": {
"serve": "vue-cli-service serve",
"test": "vue-cli-service build --mode test",
"production": "vue-cli-service build --mode production",
"build": "vue-cli-service build"
}
- 根目錄下新建文件.env.==test== 內(nèi)容：
NODE_ENV = 'test'
- src/utils下新建一個文件setBaseUrl.js
let baseUrl = ""; //這里是一個默認(rèn)的url，可以沒有
switch (process.env.NODE_ENV) {
=> 根據(jù)NODE_ENV來判斷當(dāng)前環(huán)境
case 'test':
baseUrl = "https://test-tobet.io" //測試服務(wù)器的請求url
break
case 'production':
baseUrl = "https://tobet.io" //生產(chǎn)環(huán)境url
break
default:
baseUrl = '/api' //'/api'為vue.config.js配置
}
export default baseUrl;
- main.js中
import axios from 'axios';
import baseUrl from '@/utils/setBaseUrl'
axios.defaults.baseURL = baseUrl;
-
配置本地請求地址
在根目錄下新建vue.config.js（會自動記載）
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/' : '/',
devServer: {
proxy: {
將 setBaseUrl.js 里的 baseUrl 匹配過來
||
'/api': {
target: 'http://192.168.0.88:8080', // 需要請求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '/' // 替換target中的請求地址，也就是說，在請求的時候，
// url用'/proxy'代替'http://ip.taobao.com'
}
}
}, // 配置多個代理
}
};
vue+Axios 使用攔截器
Axios是基于Promise機(jī)制實現(xiàn)的異步的鏈?zhǔn)秸埱罂蚣?。?dāng)短時間內(nèi)重復(fù)發(fā)起同一個請求時，例如搜索推薦列表，需要將上一個請求直接取消掉再發(fā)起下一個請求，一來可以減少網(wǎng)絡(luò)請求的消耗，二來防止上一個請求的返回過慢而覆蓋了應(yīng)有的返回結(jié)果。這里我們就可以使用攔截器。
Axios的配置文件中如下：
import Vue from 'vue'
import axios from 'axios';
import urlParams from '../utils/setBaseUrl' //不同環(huán)境的請求地址配置
const constant = {};
constant.env = process.env;
constant.url = urlParams;
axios.defaults.baseURL = urlParams.baseUrl;
axios.defaults.withCredentials = true;
axios.defaults.timeout = 30000;
let pending = []; //聲明一個數(shù)組用于存儲每個ajax請求的取消函數(shù)和ajax標(biāo)識
let cancelToken = axios.CancelToken;
let removePending = (ever) => {
for(let p in pending){
if(pending[p].u === ever.url + '&' + ever.method) { //當(dāng)當(dāng)前請求在數(shù)組中存在時執(zhí)行函數(shù)體
pending[p].f(); //執(zhí)行取消操作
pending.splice(p, 1); //把這條記錄從數(shù)組中移除
}
}
}
//http request 攔截器
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/json' //application/x-www-form-urlencoded
}
// ------------------------------------------------------------------------------------
removePending(config); //在一個ajax發(fā)送前執(zhí)行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// 這里的ajax標(biāo)識我是用請求地址&請求方式拼接的字符串，當(dāng)然你可以選擇其他的一些方式
pending.push({ u: config.url + '&' + config.method, f: c });
});
// -----------------------------------------------------------------------------------------
return config;
},
error => {
return Promise.reject(error);
}
);
//http response 攔截器
axios.interceptors.response.use(
response => {
// console.log(response);
// ------------------------------------------------------------------------------------------
removePending(response.config); //在一個ajax響應(yīng)后再執(zhí)行一下取消操作，把已經(jīng)完成的請求從pending中移除
// -------------------------------------------------------------------------------------------
if(response.data.errCode ==2){
router.push({
path:"/login",
querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉(zhuǎn)
})
}
return response;
},
error => {
return Promise.reject(error)
}
)
Vue.prototype.$axios = axios;
動態(tài)圖片加載
動態(tài)圖片加載不出來的原因：靜態(tài)資源是直接被webpack copy到對應(yīng)的靜態(tài)資源文件夾下，所以根本原因就在于，用了動態(tài)路徑的圖片，webpack將它認(rèn)作為一個模塊打包了，路徑錯亂，所以404
解決：
Vue.prototype.$baseUrl = process.env.BASE_URL;
<img :src ="$baseUrl + 'img/xxx.png'" />
reference:
i__May : http://www.itdecent.cn/p/f8430536059a (簡書)
