上一篇文章写了vue和打印稿的整合,发现很多小伙伴对vue-cli构建出来的项目很感兴趣,所以今天打算写写怎么在vue-cli3.0的架子上,在进一步完善,整合出具备基础功能的前端架子,主要包括以下几个功能点:
<李> webpack打包扩展李
<李> css: sass支持,normalize.css李
<李>雷布局李
<李>路由设计:懒加载,前置检查,合法性校验李
<李> api设计李
<李>请求体设计——防重复提交李
<李> vuex状态管理李
<强> webpack打包扩展
vue-cli3最大的特点就是<代码>零配置>
<强>查看当前webpack的详细配置
vue检查
使用<代码> 可以查看到详细的配置列表
<强>扩展webpack配置
当我们想要修改或者扩展webpack配置项时,可以在根目录下新增<代码> vue.config。js代码文件,列举个我自己写的简单小栗子
//webpack扩展
模块。出口={
baseUrl:‘生产’===process.env。NODE_ENV & # 63;
“production-sub-path/?
“/?
chainWebpack:配置=比;{
config.module
.rule('图像')
.use (“url-loader”)
. tap(选项=比;对象。分配(选项,{限制:500}));
},
devServer: {
打开:“达尔文”===process.platform,//主机:0.0.0.0,
端口:8088
https:假的,
紧随:假的,//代理:“https://api.douban.com”//字符串|对象
代理:http://localhost: 3000//字符串|对象
},
lintOnSave:假
};
官网Vue。js开发的标准工具的介绍非常详细,而且还有中文版,非常易懂,
<强> sass支持
& lt;风格lang=" scss "祝辞& lt;/style>
& lt;风格lang=皊css”比;
@ import”。/资产/风格/应用程序”;
& lt;/style>
在组件中使用自定义和mixin的功能,我暂时没找到全局引用的办法,只能在需要使用的组件文件中手动引用,如下
& lt;风格lang=皊css”比;
@ import“. ./资产/风格/功能”;
@ import“. ./资产/风格/mixin”;
.rem {
高度:px2rem (187.5 px);//自定义的函数
}
.mimi {
@include clearfix ();//自定义的混合
}
& lt;/style>
为了抹平各个浏览器间的差异,我们需要引入normalize.css
//app.scss
@ import”。/node_modules normalize.css/正常化”;//引用第三方正常化
@ import“custom_normalize”;//自定义的正常化
<强>雷布局
在移动端下使用雷布局是个不错的选择,既然我们使用里的scss,那么可以使用函数来简化我们的重复计算的工作。设计给到的通常是2倍图,宽为750 px,那么我们可以将基准设为<代码> document.getElementsByTagName (html) [0] .style。字形大?窗口。innerWidth/10 +的px; 然后写个转换函数,如下:
//_functions.scss
@function px2rem (px美元){
美元快速眼动:75 px;
@return (px/美元快速眼动)+快速眼动;
}
我们在使用的时候,就可以这么写
.rem {
高度:px2rem (300 px);//2倍图下的宽是300 px,
}
转换成css就是
.rem {
高度:4快速眼动;
}
<>强路由设计
主要包括路由懒加载,路由前置检查,合法性校验逻辑,以下是我写的一个简单路由
从“进口Vue Vue ';
从“vue-router”进口路由器;//路由懒加载
const getComponent=(名称:字符串)=比;()=比;进口(’。/视图/$ {name} .vue ');
Vue.use(路由器);
const路由器=new路由器({
路线:[
{
路径:“/?
名称:“回家”,
组件:getComponent(“回家”)
},
{
路径:'/',
名称:“关于”,
组件:getComponent('对'),
元:{
身份验证:真
}
},
{
路径:“*”,
名称:“not_fount”,
组件:getComponent (“notFount”)
}
]
});/* *
*路由前置检查
*/路由器。beforeEach(下),从=比;{//合法性校验
如果(to.meta.auth) {
控制台。日志(“到身份验证”);
next ();
}
next ();
});
出口的默认路由器;
