前端vue：vue-cli 3.x項目 模板文件下載前端解決方案

vue-cli 3.x環境安裝：

1.vue-cli 腳手架3.x安裝：

npm install -g @vue/cli
複製代碼

2.驗證安裝成功

vue  
複製代碼

若是遇到以下錯誤提示：

'vue' 不是內部或外部命令，也不是可運行的程序
或批處理文件。
複製代碼

吶，必定是系統屬性中全局安裝環境變量，麼有配置：

舉例：path:D:\Program Files\nodejs\node_global    
複製代碼

3.建立一個項目hello-world:

首先咱們能夠先看看vue-cli 3.x 腳手架目錄更加清晰簡約，省去了2.x版本的webpack配置的東西；

而其實是將配置文件包放在了node_modules裏面了；

開發者須要關注兩個注意點：

• src目錄下的文件，是開發源代碼以及資源文件；當執行npm run build 命令時，webpack將src目錄的文件進行打包編譯；
• public目錄下的文件，存放的是index.html以及不須要被打包編譯的文件，當執行npm run build 命令打包時，該目錄下的文件，將原樣輸出到dist目錄；

模板文件下載前端解決方案:

需求：

• 當用戶點擊「模板下載」按鈕，此時web客戶端執行文件下載（如:「.xlsx」格式文件），（此過程不通過請求後端以文件服務器url地址請求的方式下載或者後端返回文件流的方式，前臺對文件流進行處理的方式下載；）如圖所示：

分析:

• 經過將須要下載的靜態資源文件存放在web端，當點擊下載模板按鈕的時候，執行window.open("relative URL");// ps: 標籤兼容性很差；
• "relative URL" 爲打包之後相對於根頁面index.html文件的相對目錄；
• 在vue項目中cli 3.x腳手架建立的項目，將不須要被打包編譯的資源文件存放在public目錄之下
• 在vue項目中cli 2.x腳手架建立的項目，將不須要被打包編譯的資源文件存放在static目錄之下

如圖所示：爲cli 3.x 項目下模板文件存放路徑；以及打包編譯後dist目錄

此時點擊下載，將執行web端資源文件下載，這種狀況適用於格式固定的模板文件下載前端解決方案；

代碼：

<em @click="fetchTemplate">下載模板</em>
複製代碼

uploadFile.vue

<el-upload
                class="upload-excel"
                drag
                show-file-list
                :limit="uploadLimit"
                :on-exceed="handleExceed"
                :before-upload="beforeUploadExcel"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :action="actionUrl"
                multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">將文件拖到此處，或<em>瀏覽文件上傳</em></div>
          <div class="el-upload__tip" slot="tip">只能上傳一個xlsx/xls格式文件，且不超過10MB <em @click="fetchTemplate">下載模板</em> </div>
        </el-upload>
        <span slot="footer" class="dialog-footer  uploadFooter">
                <el-button type="primary"  :disabled="canReview" class="btn confirmBtn" @click="uploadDialogVisible = false;reviewExcelData()">預覽</el-button>
                <el-button class=" btn cancelBtn" @click="uploadDialogVisible = false">取 消</el-button>
             </span>
      </el-dialog>
複製代碼

javascript：

<script>
exprot default{
    method:{
        fetchTemplate(){
      window.open("./file/uploadFile.xls");
    }
    }
}
</scritp>
複製代碼