前言
好久不見啊大家，今天想寫這篇博客的時候才發現博客已經斷更大半年了（手動滑稽）
由於去年十二月份被公司再次發配到上海出差，而且這次主要開發的是針對IE瀏覽器的一個插件（c++ 和 js 的交互）
所以就很長時間沒有接觸外網了，更別說開發外網的項目了，博客也沒什麼可更新的了
這篇博客是插件已經基本開發完成，馬上又要重新接手外網的項目了
就準備重新給大家搭建個vue項目最最最最最基礎模板順便自己再回顧下
一、項目基礎
好了，不多BB直接上乾貨，先說下這個項目用到的東西
- vue2.x
- vuex
- vue-router
- axios
- element-ui
- nprogress
- moment
- babel-polyfill
- normalize
- vue-cli4.0
雖然3.0快要發佈了，但是個人覺得短期內還是沒有升級的必要的
vue的全家桶系列vuex的使用根據自己的項目需求來，千萬不要爲了使用而使用
二、項目目錄
先上一張項目目錄圖，再單獨介紹各個目錄
| 目錄 | 說明 |
| node_modules | 項目依賴模塊包 |
| public | 存放靜態文件 |
| src | 源代碼目錄 |
| src -> api | 全局接口目錄，應與views目錄對應 |
| src -> assets | 靜態文件目錄 |
| src -> componets | 全局組件目錄 |
| src -> filters | 全局過濾器目錄 |
| src -> router | 路由目錄 |
| src -> store | 狀態管理目錄 |
| src -> utils | 工具目錄 |
| src -> views | 頁面目錄，應與api目錄對應 |
| src -> App.vue | 主頁面 |
| src -> main.js | 入口文件 |
| .env.development | 開發環境配置文件 |
| .env.production | 正式環境配置文件 |
| .env.test | 測試環境配置文件 |
| .gitignore | git忽略配置文件 |
| babel.config.js | babel配置文件 |
| package-lock.json | - |
| package.json | 依賴配置文件 |
| README.md | 說明文件 |
| vue.config.js | 項目配置文件 |
三、axios的封裝和使用
在項目裏面對axios封裝能夠節省不少的代碼和時間，首先在 src -> utils 目錄下新建 request.js 文件
// src -> utils > request.js文件
import axios from "axios";
import { Message } from "element-ui";
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 0
});
service.interceptors.request.use(
config => {
//如果本地存儲裏有JSESSIONID就攜帶上去，一般是自己登錄後存進去的
const JSESSIONID = sessionStorage.getItem("JSESSIONID");
if (JSESSIONID) {
config.headers["JSESSIONID"] = JSESSIONID;
}
return config;
},
error => {
Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
const res = response.data;
//此處的值自己與後臺約定
if (res._code != "200") {
Message.closeAll();
Message({
message: res._msg,
type: "error",
duration: 3 * 1000
});
return Promise.reject(res);
} else {
return res;
}
},
error => {
var status;
try {
status = error.response.status;
} catch (error) {
//解決跨域等問題的錯誤下獲取不到status
Message.closeAll();
Message({
message: "服務器未知錯誤",
type: "error",
duration: 3 * 1000
});
return Promise.reject(error);
}
let msg = "";
switch (status) {
case 400:
msg = "錯誤的請求";
break;
...
default:
msg = "連接錯誤";
break;
}
Message.closeAll();
Message({
message: status + msg,
type: "error",
duration: 3 * 1000
});
return Promise.reject(error);
}
);
export default service;
比如 views -> home > index.vue 文件裏用到了 getInfo 接口 那麼就在 api -> home -> index.js中封裝
// api -> home -> index.js文件
import request from "@/utils/request";
export const getInfo = params => {
return request({ url: "/getInfo", method: "get", params });
};
使用的時候如下
// views -> home -> index.vue文件
<script>
import { getInfo } from "@/api/home/index.js";
export default {
name: "home",
data() {
return {};
},
created() {
this.startApi();
},
methods: {
startApi() {
let params = {
name: "lyk"
};
getInfo(params)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
}
};
</script>
這樣封裝以後就能很方便的統一管理接口了
四、全局組件的註冊和使用
當我們的項目有很多和全局組件的時候，每次都要在main.js裏面進行引入和註冊。這樣看起來很麻煩，使用webpack的require.context就能巧妙的解決這個問題了
在components目錄下新建index.js文件用來批量註冊全局組件
// components -> index.js
import Vue from "vue";
// 處理大小寫
function changeStr(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
// 批量匹配註冊
const requireComponent = require.context('.', false, /\.vue$/)
requireComponent.keys().forEach(fileName => {
const config = requireComponent(fileName)
const componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
Vue.component(componentName, config.default || config)
})
然後在main.js裏面引入
// main.js
/* 引入全局組件註冊 */
import "./components";
完成之後只需要在components目錄下新建xxx.vue文件就可以自動註冊組件了
五、全局過濾器的註冊
當我們需要對變量進行處理的時候，就會用到過濾器，當前我們總不能一個過濾器註冊一次吧，肯定也要批量註冊
在 filters 目錄下新建 index.js 文件用來存放過濾器，我就用一個對日期處理的例子來說明
// filters -> index.js文件
/**
* 格式化日期
* @param {string} time 時間戳
* @param {string} type 分隔符
*/
export const formatDate = (time, type) => {
if (time) {
var date = new Date();
date.setTime(time);
var year = date.getFullYear();
var month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1) * 1
: date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
if (type == "-") {
return year + "-" + month + "-" + day;
} else if (type == "/") {
return year + "/" + month + "/" + day;
} else if (type == ".") {
return year + "." + month + "." + day;
} else {
return year + "年" + month + "月" + day + "日";
}
}
};
然後在main.js裏面批量註冊就可以了
// main.js
import * as filters from "./filters";
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
六、路由的分區和nprogress的使用
當項目頁面過多的時候，如果單純使用一個路由文件，難免看起來比較複雜，所以這個時候根據功能進行分區引入就顯得比較優雅，再配合nprogress插件顯示頂部進度條就更完美了
在 router 目錄下新建index.js文件代碼如下
// router -> index.js
import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({ showSpinner: false });
Vue.use(VueRouter)
// 所有的路由數組
const routerList = [];
// 該函數用於將所有分區路由中的路由添加到路由數組
function importAll(routerArr) {
routerArr.keys().forEach(key => {
routerList.push(routerArr(key).default)
})
}
//檢測當前目錄下所有的 xx.routes.js 文件
importAll(require.context(".", true, /\.routes\.js/))
const routes = [
...routerList
]
const router = new VueRouter({
routes
})
//進入啓動進度條
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
//打開後關閉進度條
router.afterEach(() => {
NProgress.done();
});
export default router
然後在根據功能在 router 目錄下新建例如 login.routes.js、user.routes.js 的路由文件就會自動引入到index.js裏面註冊路由
// router -> xx.routes.js
export default {
path: '/',
name: 'Home',
component: () => import('../views/home/index.vue'),
children: [...]
}
總結
這篇博客就是用來介紹這個項目搭建的一些優雅點的
具體的代碼爲了節省你們的積分已經上傳到github：基於vue2.0的vue項目模板
基本上項目用到的我認爲算是在基礎上能更優雅開發的點都已經列出來了，如果有疑問可以留言提出來
項目裏沒有提及關於store的使用，因爲這個一般小項目用不到，當然配合它配合axios和element-ui也可以實現一個好玩的點
具體看我這篇博客：vuex+axios+element-ui實現頁面請求loading
關於初始化項目的搭建可以看我這篇博客：使用vue-cli4.0快速搭建一個項目
關於項目環境的區分可以看這篇博客：使用vue-cli3.0/4.0搭建的項目如何區分環境
細心的讀者應該發現了，代碼中多次使用了 require.context 來實現前端工程自動化，使用它也可以封裝svg圖標的使用
具體看花褲衩大神的這篇博客：手摸手，帶你優雅的使用 icon
ok，作爲一個初學者的裝逼結束了，有問題歡迎各位大佬留言