vue做前臺工程總結（第二個項目進階版）

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