vue引入公共样式,vue 全局样式
本文主要介绍了vue项目中一些全局公共样式的设置，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
vue设置全局公共风格思想vue公共风格和公共方法问题描述公共风格公共方法
vue设置全局的公共样式
我公司开发的产品在运维上线给客户时，客户可能会对产品主页面的一些色调和字体大小不满意。因此，当我们的开发包发布到客户端服务器时，需要有一个scss文件来随时调整这些字体和颜色。
思路
1.首先在public公共文件的css文件夹下新建一个allstyle.scss的样式文件夹，在这个文件夹中定义一些样式和字体大小。这样做的好处是，这个文件在webpack打包的时候不会被重新打包，我们可以很容易的在打包的dist文件的css中找到我们的Scss文件，方便后期的修改。
2.在我们需要的页面上引入这个公共scss文件，然后我们就可以在这个页面上使用我们定义的公共样式了。
代码：allstyle.scss中的代码
a.vue页面的引入和使用
总结：这样的另一个好处是容易维护。缺点是不够灵活。
vue公共样式与公共方法
问题描述
项目中提取了一些常用的样式和方法，可以节省代码量，方便各页面的使用。
公共样式
1、index.css
在src/assets目录中，创建一个新的index.css文件，并将该css文件引入main.js
从“vue”导入Vue
从导入路由器。/路由器
“导入”。/assets/index.css
2、static和assets
Webpack不会处理static:static/目录中的文件：它们将被直接复制到最终目录(默认为dist/static)。必须使用绝对路径引用这些文件。资产：目录中的文件将由Webpack处理。
公共方法
1、全局方法
防止按钮重复提交。
(1)新建一个src/api/index.js文件
从“vue”导入Vue
//防止按钮被重复点击
const prevent click=vue . directive( prevent click ，{
已插入：函数(el，绑定){
el.addEventListener(click ，()={
如果(！el.disabled) {
el.disabled=true
setTimeout(()={
el.disabled=false
}，binding.value 5000)
}
})
}
});
导出{ preventReClick }
(2)2)main . js简介
从导入{ preventReClick }./src/API/index ；//介绍方法
(3)用于vue文件
El-button type= primary @ click= submit form( rule form ) size=medium v-prevent click add/El-button。
您可以在每个页面中使用v-prevent click，而无需重新引入每个页面。
b、防止重复点击A标签？
2、局部方法
有些方法只在几页中提到。
a、包装axios
在src/api文件夹下，创建新的request.js
从“axios”导入axios；
/* axios get */
导出函数get(url) {
返回函数(参数){
返回axios.get(url ？params)。然后(res={
//console . log(RES)；
返回res.data//根据实际情况获取返回的数据
})。catch(e={ })；
};
}
/* axios post */
导出功能发布(url) {
返回函数(参数){
返回axios.post(url ？params)。然后(res={
返回res.data根据实际情况获取返回的数据。
})。catch(e={ })；
};
}
在api/index.js中调用并导出
从导入{get，post}。/请求
从“vue”导入Vue
//用户模块
const post log in=post(/CGI/sys/log in )//log in
const get logout=get(/CGI/sys/logout )//exit
const getuser show=Get(/CGI/main/system/user/show )//获取用户列表
const post useradd=post(/CGI/main/system/user/Add )//添加用户
constpostuseupdate=post(/CGI/main/system/user/update )//修改用户
constpostuserdelete=post(/CGI/main/system/user/Delete )//删除用户
导出{
登录后，
getLogout，
getUsershow，
postUseradd，
postUserupdate，
postUserdelete，
}
在页面中使用
从导入{ postLogin }././API/index . js ；//介绍方法
submitForm(formName) {
这个参考文献[表单名]。验证((有效)={
如果（有效){
//登录提交
发布登录(查询字符串。字符串ify(this。规则形式).然后(res={
if (res.code==2) {
localStorage.setItem(用户名，this.ruleForm.username)
if (this.checked) {
localStorage.setItem(password ，this.ruleForm.password)
}else if(！this.checked){
localStorage.removeItem(密码)
}
这个消息({
消息：res.message，
类型："成功"
});
变那个=这个
//跳转到首页
setTimeout(function(){
那个. router.push({name:index})
},1000)
//将登录名使用状态管理传递到主页页面
会话存储。setitem(登录时间，新日期())
这个store.commit(handleUserLogin ，RES . data。用户)；
}否则{
这个消息({
消息： 登录失败， res.message，
类型："错误"
});
}
})
}否则{
返回错误的
}
});
},
乙、系统时间格式化
导出函数settime() {
返回函数（值){
var日期=新日期（值);
var年=日期。get full year()；
var月=日期。getmonth()1；
月=月10?"0"月：月；
var day=date。getdate()；
天=第10天？"0"天：天；
var小时=日期。get hours()；
小时=小时10?"0"小时：小时；
var分钟=日期。get minutes()；
分钟=分钟10?"0"分钟：分钟；
变量秒=日期。获取秒数()；
秒=秒10?"0"秒：秒；
返回年-月-日 小时:分:秒；
}
}
const systime=settime()
已安装(){
var _ this=this
_这个。规则形式。create time=systime(new Date())；
_这个。规则形式。poid=setoid时间(新日期())；
},
丙、单据单号生成
//单据年月日
导出函数oidTime() {
返回函数（值){
var日期=新日期（值);
var年=日期。get full year()；
var月=日期。getmonth()1；
月=月10?"0"月：月；
var day=date。getdate()；
天=第10天？"0"天：天；
返回年月日(数学。地板(数学。random()*(9999-1000))1000)；
}
}
const setOidTime=oidTime()
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。