vue做前台工程总结（第二个项目进阶版）

最新推荐文章于 2024-04-06 12:40:11 发布

刀光剑影闯荡江湖

最新推荐文章于 2024-04-06 12:40:11 发布

阅读量4.4k

点赞数

分类专栏：高端前端文章标签：框架 javascript vue

本文链接：https://blog.csdn.net/u011244794/article/details/53841326

版权

高端前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文总结了使用Vue.js进行的第二个项目，重点介绍了项目框架，包括Vue.js作为主要框架，配合webpack打包工具，npm包管理工具，以及在开发和部署中使用nginx服务器。此外，还探讨了几个关键插件的应用：AdminLTE皮肤、js-cookie处理cookie和pdfmake导出PDF。项目采用前后端分离，后端用Tomcat，前端用nginx。并提到了dropzonejs上传插件的使用。

摘要由CSDN通过智能技术生成

1 引言：使用vue,js做了第二个项目，这次又有了新的感悟和体会，主要是自己对于代码的框架把握不好，因此学长迅速学了一下马上给我很多指导（我已经跪了）。

下面介绍一下整个项目框架，以及使用到的工具，这样大家在模仿的时候好有个参考。

2 介绍：vue.js作为主体的框架

打包工具：webpack

包管理工具：npm

服务器： nginx

注：开发的时候是前后端分离的，后端使用tomcat服务器，前端使用nginx服务器

正式使用的时候:都使用tomcat服务器,只要吧前台的代码放进去tomcat的对应文件夹就好啦

3 使用插件：

3.1 皮肤：AdminLTE

3.2 cookie：js-cookie

[使用方法]

html: 引入js

html: 方法中使用:

if (Cookies.get("userid"))
            $("#cta").hide()

.vue中的<script>标签的方法中:

Cookies.remove("userid","");

3.3 导出pdf：pdfmake

[使用方法]

html: 引入js

.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