精华内容
下载资源
问答
  • vue-3-vue文件导入另一个vue文件
    千次阅读
    2019-09-19 22:10:42
    1. 新建一个 testtem.vue 文件

      和 index.vue 同级

    2. 在testtem.vue 创建一个模板

       <template>
         <div id="tem_test">
             test。。。。。。
         </div>
       </template>
       
       <script>
       
       export default {
         name: 'tem_test',
       }
       </script>
      
    3. 将testtem导入index

       <template>
         <div id="index">
           ces
           <TemFoot></TemFoot>
         </div>
       </template>
       
       <script>
         import TemFoot from './testtem'
       export default {
         name: 'index',
         data () {
           return {
             msg: 'Welcome to Your Vue.js App'
           }
         },
         components:{
           TemFoot
         }
       }
       </script>
       
       <style>
       </style>
      
    更多相关内容
  • vue导入导出excel文件

    2019-04-16 09:00:39
    vue导入导出excel文件所需要用到的依赖文件,从网上转载而来,并非原创。大家需要可以从别处下载,这里下载需要积分,本人上传只是为了方便保存以供以后所用。
  • vue导入文件

    千次阅读 2019-11-05 15:09:37
    <el-upload class="upload-demo" action="" :http-request="addExcel" :show-file-list='false'> <el-button size="mini" type="primary">导入</el-button> </el-upload> addExcel...
    <el-upload
      class="upload-demo"
      action=""
      :http-request="addExcel"
      :show-file-list='false'>
      <el-button size="mini" type="primary">导入</el-button>
    </el-upload>
    
    addExcel(files){
    	let that = this
    	// FormData 对象
    	var form = new FormData();
    	form.append("file", files.file);// 文件对象
    	
    	// XMLHttpRequest 对象
    	var xhr = new XMLHttpRequest();
    	xhr.timeout = 30000; //设置超时
    	xhr.open("post", '/yxcAdmin/hospital/add/excel', true);
    	let token = sessionStorage.getItem('token')
    	xhr.setRequestHeader('token', token);
    	xhr.responseType = "json";
    	xhr.onload = function () {
    	 if (xhr.response.status != 0) {
    	   that.$message.error(response.message)
    	   return false;
    	 }
    	 that.$message.success('上传文件成功!')
    	};
    	xhr.ontimeout = function () {
    	that.$message.error('数据加载失败,请刷新页面')
    	};
    	xhr.onerror = function (res) {
    	that.$message.error('数据加载失败,请刷新页面')
    	};
    	xhr.send(form);
    	// API.hospitalAddExcel().then(result=>{
    	// 	if (result.status != "0") {
    	// 		that.$message.error({
    	// 			showClose: true,
    	// 			message: result.message.toString(),
    	// 			duration: 2000
    	// 		});
    	// 		return;
    	// 	}
    	// 	
    	// }).catch(error=>{
    	// 	this.$message.error(error.message)
    	// })
    	},
    
    展开全文
  • //导入文件 success:成功回调函数 fail失败回调,url:上传地址,that:vue对象(this) function importFile(that,url,success,fail){ let input=document.createElement("input"); input.setAttribute('type','...

    已知: axios已通过Vue原型属性设置 (main.js) Vue.prototype.$axios=axios;

    1.导入文件(上传):

    //导入文件 success:成功回调函数 fail失败回调,url:上传地址,that:vue对象(this)
    function importFile(that,url,success,fail){
      let input=document.createElement("input");
      input.setAttribute('type','file');
      input.setAttribute('accept','*');
      input.style.display="none";
      input.addEventListener('change',()=>{
         if(input.files&&input.files.length>0){
          uploadFile(that,url,input.files[0],success,fail)
         }
      })
      document.body.appendChild(input);
       input.click();
       document.body.removeChild(input);
    }
    
    //上传文件
    function uploadFile(that, url, file,success,fail) {
      let formData = new FormData();
      formData.append("file", file);
      let url2 = process.env.VUE_APP_BASE_API + url
      let config={headers: {
        "Content-Type": "multipart/form-data",
      }}
      that.$axios.post(url2,formData,config).then(res=>{
        success(res)
      }).catch(err=>{
        fail(err)
      })
    }
    
    

    导入监听事件调用importFile方法即可

    2.导出文件(下载)(二进制流文件)

    //导出文件 that:vue对象this,url接口地址,filename:'下载下来文件名包含格式例如:物品清单.xls'
    function exportFile(that, url, filename,data={}) {
      that
        .$axios({
          responseType: "blob",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
          method: "get",
          url: process.env.VUE_APP_BASE_API + url,
          params:data
        })
        .then((res) => {
          if (res?.data) {
            let blob = new Blob([res.data]);
            let url2 = window.URL.createObjectURL(blob);
            downloadFile(url2, filename);
          }
        });
    }
    
    //文件下载
    function downloadFile(url, filename) {
      if (!url) return;
      let link = document.createElement("a"); //创建a标签
      link.style.display = "none";
      link.href = url; //文件下载地址
      link.setAttribute("download", filename); //设置下载属性 以及文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
    

    导出监听事件调用exportFile方法即可

    展开全文
  • VUE+webpack

    项目结构如下所示:


    webpack的配置文件代码如下所示:

    var webpack = require("webpack");
    module.exports = {
        entry: './resource/js/app.js',
        output: {
            path: '',
            filename: "./index.js"
        },
        module: {
            loaders: [
                {test:/\.css$/,loader:'style-loader!css-loader'},
                { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
                {test: /\.vue$/,loader: 'vue'},
                {test: /\.(png|jpg|gif|svg)$/,loader: 'file?name=[name].[ext]?[hash]'},
                {
                    test: /\.(png|jpg)$/,
                    loader: 'url?limit=40000'
                },
                {
                    test: /\.jsx?$/,
                    loader: 'babel',
                    query: {
                        presets: ['es2015']
                    }
                }
            ]
        },
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            progress: true,
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery"
            })
        ]
    };
    在login_header.vue里面导入js及index.css文件,代码如下所示:

    <template>
        <div class="nav">
            <div class="nav-slider js-slider">
                <a class="active" v-on:click="register">注册</a>
                <a v-on:click="login">登录</a>
                <span class="nav-slider-bar"></span>
            </div>
        </div>
    </template>
    <script>
        require('../resource/js/common.js');
        require('../resource/css/index.css');
        export default {
            methods:{
                register: function(){
                    $('.js-slider').removeClass('nav-slider-l').find('a').eq(0).addClass('active').siblings('a').removeClass('active');
                    location.href = '#register';
                },
                login: function(){
                    $('.js-slider').addClass('nav-slider-l').find('a').eq(1).addClass('active').siblings('a').removeClass('active');
                    location.href = '#login';
                }
            }
        }
    </script>
    

    在命令行里面运行webpack命令,一直报错,如下所示:

    经检查,发现是样式文件里面的url导致此错误

    展开全文
  • 在某个.vue文件,或js文件(例如index.js或者router.js)中引入vue组件2.在某个.vue文件中引入css3.引入工具类3.1 引入单个方法3.2 引入成组的方法总结 前言 html文件中,通过script标签引入js文件; vue中通过...
  • 1. 第一种导入方式 1-1. 使用组件 <div class="upload-excel"> <el-upload id="eccel" :disabled="buttonDis?true:false
  • 主要介绍了Vue如何基于es6导入外部js文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • Antd Vue 文件导出与导入 StaticMethods.js export let exportRaw = (name, data) => { var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob([data]); var save_link = ...
  • 主要介绍了Vue结合后台导入导出Excel问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue如何导入外部js文件

    千次阅读 2019-10-25 15:35:46
    本文主要介绍js文件引入外部js文件的方法,适用于vue,提供ES5和ES6的写法。解决了在vue下公共app.js引入钉钉封装dd对象不生效。 一、ES5 var JSElement=document.createElement("script"); JSElement.setAttribute...
  • 项目需求需要上传shp文件然后在地图上展示,网上找了很多,发现大多数描述的都不完整,代码给的也不完整。所以自己整理了一下将主要的代码分享出来
  • 如果from后面路径是一个文件夹,文件夹中既有js又有vue文件,则导入优先级js>vuefrom的来源是文件夹,那么在package.json存在且设置正确的情况下,会默认加载package.json;若不满足,则加载index.js;若不满足,...
  • 报错原因:ts识别不出.vue文件! 解决方案如下: 在根目录下面添加一个xxx.d.ts文件, declare module '*vue' { import { ComponentOptions } from "vue"; const ComponentOptions: ComponentOptions export ...
  • vue 文件上传 带格式、类型、大小、进度展示
  • vue excel导入导出.zip

    2020-08-05 14:31:00
    vue 使用导入导出简易版 使用的js 私密文章使用 -------------凑--------------------凑凑
  • 主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下
  • vue导入外部js文件的方法

    千次阅读 2019-05-30 17:19:00
    1、将需要引入的外部js文件,改成下图的格式,将需要引入的内容放在一个函数内,并通过export暴露出来。 2、在vue里引入该模块  通过import引入,然后写入方法里,再按需求调用 转载于:...
  • 上传/导入 1、前端解析文件处理后再传递 依赖—解析文件 import Papa from 'papaparse' html <div class="_importIn"> <img title="导入文件" src="../../assets/image/tech/importIn.png" alt=""> 导入文件" type...
  • vue-typescript-import-dts TypeScript声明文件,该文件允许对* .vue文件使用导入。 主要用例是捆绑程序环境,例如我们的vue-typescript-import-dts TypeScript声明文件,该文件允许将导入与* .vue文件一起使用。 ...
  • 直接上代码,使用vue实现表格excel的导入功能,使用vue实现表格excel的导出功能
  • 由于项目需要同时导入excel文档和jpg图片,因此尝试了一些方法来完成任务。 图片数据是以base64格式存入的,显示和转移都比较...使用的是element-ui,使用的是vue解析excel方法,需要安装xslx,可参考https://blog.cs
  • 有这么一个需求:一个导入按钮,点击按钮导入excel表,如果excel表中部分数据导入失败,则自动下载该部分导入失败数据的excel表,如果全部导入成功,则提示“导入成功”。 首先附上ElementUI的上传文件组件 ...
  • vue项目导入导出功能1.导出2.导入 1.导出 导出功能其实很简单,只需要调用后端的接口即可,不过有一些需要注意的地方,具体代码如下所示: 这是导出按钮,定义导出的点击事件: <a-button type="primary" @...
  • 二、vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head>...
  • vue文件的可视化设计器;支持组件拖拽、导出为vue文件。 所见即所得 支持自定义扩展 支持任意模板片段 支持扩展模块 支持vue文件中的data、computed、watch、methods可视化维护 支持template节点中的props、style...
  • vue 实现导入、读取 txt文件

    千次阅读 2020-09-22 14:31:39
    vue 实现导入txt文件 效果图如下: 上代码: <template> <div> <p> <el-button @click="txtbtn">插入文本</el-button> </p> <input type="file" name="fileToUpload...
  • vue-i18n-service翻译团队(而非开发人员)想要一个包含所有键的文件,以进行翻译。 但是我喜欢在单文件组件中使用翻译。 我找到了一种使每个人都满意的解决方案:vue-i18n-service导出vue-i18n-service翻译团队(而...
  • 它将使用import-html-entry包加载html文件,因此html文件就像组件的最小描述。 然后它将解析它,以获得html模板,样式和脚本。 但是目前只有脚本是有用的。 然后它将执行所有脚本并获得执行结果。 因此,您应该在...
  • vue文件里面导入

    2022-04-07 17:02:07
    要在script标签内部 export default前面import

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,567
精华内容 24,226
关键字:

vue文件导入