前端vue：vue-cli3.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>
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。