本项目 GitHub 仓库地址：https://github.com/charleylla/charley-vue-multi
上篇文章 主要介绍了 Webpack 的配置部分，这篇文章主要介绍项目中的模块划分，内容不多，一会就能看完。
文件结构
首先看一下 src 目录的文件结构：
├─assets
│ ├─image
│ ├─lib
│ └─style
│ atom.scss
│ constant.scss
│ func.scss
│ main.scss
│
├─component
│ └─test
│ index.js
│ style.scss
│ template.vue
│
├─model
│ index.js
│
├─page
│ ├─home
│ │ index.js
│ │ style.scss
│ │ template.vue
│ │
│ └─index
│ index.js
│ style.scss
│ template.vue
│
├─shared
│ api.js
│ constant.js
│
└─util
index.js
request.js
下面对这些目录进行介绍。
assets 目录
assets 目录用来提供公用的样式文件，图片及第三方库等。
这里主要看下 style 目录，style 目录中有三个文件：
- atom.scss
- constant.scss
- func.scss
- main.scss
其中 atom.scss 用来定义 ATOM CSS 规则，constant.scss 中定义常用的变量至，func.scss 用来提供常用函数和 Minxins，main.scss 用来对前面的几个文件进行整合。main.scss 的内容如下：
@import "./constant.scss";
@import "./func.scss";
@import "./atom.scss";
component 目录
该目录中定义了项目中需要用到的组件，component 目录下的每个子目录表示一个组件，每个组件由 index.js，style.scss 和 template.vue 组成。
其中，template.vue 用来定义组件，通过 index.js 将组件暴露出去，style.scss 用来定义组件中的样式。
page 目录
page 中存放页面，每个页面都是 page 目录中的一个子目录，文件的划分和 component 下的组件保持一致。区别在于 index.js 文件，对于页面级组件，需要将其挂载到根节点上。
import Vue from "vue";
import Tpl from "./template.vue";
new Vue({
render:h => h(Tpl),
}).$mount("#app");
model 目录
该目录用来定义每个页面的数据获取，如果页面中需要和后台进行交互，就在 model 中创建一个文件，文件就以页面的名字命名。
下面是 model 目录下 index.js 的内容：
import { testUrl } from "@shared/api";
export const getFetchTest = async () => {
const res = await new Promise(res => {
setTimeout(() => {
res(testUrl);
},2000);
});
return res;
};
当然，对于前后端交互的内容，也可以放在组件中，但如果页面上的交互过多时，容易引起组件文件的臃肿，不易维护。因此我推荐将每个页面的数据获取统一放在 model 下统一管理，当需要修改数据获取方式时，不用修改组件文件，直接调整 model 中文件的内容即可。
uitl 目录
util 目录中用来提供项目中的公共方法，以 request.js 为例，该文件中将 Axios 的请求方法进行了封装：
import axios from "axios";
axios.defaults.baseURL = window.env === "prod" ? window.prodBaseUrl : window.devBaseUrl;
axios.defaults.timeout = 120000;
export const getFetch = async (url,params = {}) => {
try{
const res = await axios.get(url,params);
return res;
}catch(e){
return {
code:-1,
message:e.message,
status:false,
};
}
};
export const postFetch = async (url,params = {}) => {
try{
const res = await axios.post(url,params);
return res;
}catch(e){
return {
code:-1,
message:e.message,
status:false,
};
}
};
shared 目录
该目录中定义了项目中公用的配置，如接口地址，常量等。
区分测试环境和正式环境
一般开发都会有一个测试环境和正式环境，测试环境用来在内部提供测试，正式环境用来提供给用户使用，正式环境和测试环境具有不同的接口地址。
我们可以将正式环境和测试环境的接口地址分别写在 shared 下的某个文件中，将其和 Node 的环境变量进行绑定，构建时传入不同的环境变量，根据环境变量在 util/request.js 中设置 Axios 的 BaseURL。
但通过这样的方式有一点问题：发布测试环境或正式环境时都需要重新打包，而这个打包仅仅是为了修改一下基础的接口地址，很不划算。
因此，我在根目录的 template 目录下定义了一个 config.js 文件，打包时直接通过 copy-webpack-plugin 将该文件复制到 dist 目录，同时在 template/index.html 文件中引用 config.js。这样一来，如果想修改基础的接口地址，只需要在 dist 目录下的 config.js 中，设置 window.env 即可，无需重复打包。
本项目 GitHub 仓库地址为：https://github.com/charleylla/charley-vue-multi，如果您觉得我的文章对您有帮助，欢迎帮我点个 Star，如果您有问题，欢迎提 Issue~
完。
网友评论