vue做前台工程总结(第二个项目进阶版)
引言:使用vue,js做了第二个项目,这次又有了新的感悟和体会,主要是自己对于代码的框架把握不好,因此学长迅速学了一下马上给我很多指导(我已经跪了)。下面介绍一下整个项目框架,以及使用到的工具,这样大家在模仿的时候好有个参考。介绍:vue.js作为主体的框架打包工具:webpack包管理工具:npm服务器: 注:我们是前后端分离的,后端使用tomcat服务器,前端使用服
1 引言:使用vue,js做了第二个项目,这次又有了新的感悟和体会,主要是自己对于代码的框架把握不好,因此学长迅速学了一下马上给我很多指导(我已经跪了)。
下面介绍一下整个项目框架,以及使用到的工具,这样大家在模仿的时候好有个参考。
2 介绍:vue.js作为主体的框架
打包工具:webpack
包管理工具:npm
服务器: nginx
注:开发的时候是前后端分离的,后端使用tomcat服务器,前端使用nginx服务器
正式使用的时候:都使用tomcat服务器,只要吧前台的代码放进去tomcat的对应文件夹就好啦
3 使用插件:
3.1 皮肤:AdminLTE
3.2 cookie:js-cookie
[使用方法]
html: 引入js
<script src="common/js/js.cookie.js"></script>
html: 方法中使用:
if (Cookies.get("userid"))
$("#cta").hide()
.vue中的<script>标签的方法中:
Cookies.remove("userid","");
3.3 导出pdf:pdfmake
[使用方法]
html: 引入js
<script src="common/js/pdfmake.min.js"></script>
<script src="common/js/vfs_fonts.js"></script>
.vue中的<script>标签的方法中:
var dd = {
content: [
{
stack: [
'代码同源检测分析报告',
{ text: 'codeclone', style: 'subheader' },
],
style: 'header'
},
{
text: '1 项目详情', style: 'subheader'
},
{
style: 'tableExample',
table: {
body: [
['大小', '语言', '检测开始时间','检测结束时间'],
[size, language, createTime,finishTime]
]
}
},{ text: '2-1 项目成分检测', style: 'subheader'
},
{ text: '2-1-1 相似文件数量Top10', style: 'subheader' },
{
style: 'tableExample',
table: {
headerRows: 1,
body: c0
},
layout: 'lightHorizontalLines'
}
],
styles: {
header: {
alignment: 'justify'
},
font1: {
alignment: 'justify'
},
subheader: {
margin: [0, 10, 0, 5]
},
tableExample: {
margin: [0, 5, 0, 15]
},
tableHeader: {
}
},
defaultStyle: {
font: 'msyh'
}
};
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
'msyh': {
normal: 'msyh.ttf',
bold: 'msyhbd.ttf',
italics: 'msyh.ttf',
bolditalics: 'msyhbd.ttf',
}
};
pdfMake.createPdf(dd).download();
注: 使用的字体是微软雅黑(只加了这一个字体,运行就会比较快)
自己加字体教程: http://www.jb51.net/article/88397.htm
已经被我编译好的js文件,放在哪里比较好呢?还是需要的评论我一下就好.
非常重要!:如果你希望能没有各种乱码,文字缺失,就不要把字号以及斜体什么的这些限制加入进去.
3.4 上传插件:dropzonejs
更多推荐
所有评论(0)