精华内容
参与话题
问答
  • 首先是我是写了一个Loading插件然后是挂在打vue....然后我想在封装的axios的http.js文件里使用这个插件。所以我得想办法把vue实例引进来。 经过测试可以如下这样。(好吧上面,都是废话) 图中代码: impor...

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的。

     

    在main.js中use使用了这个插件。

     

    至此vue原型是就被我挂上 $loadding方法了。

    然后我想在封装的axios的http.js文件里使用这个插件。所以我得想办法把vue实例引进来。

    经过测试可以如下这样。(好吧上面,都是废话)

     

    图中代码:

    import Vue from 'vue'; //引入vue
    //必须实例化 Vue
    let vm = new Vue();
    /*这里有个点需要注意,直接在这个js文件里,直接使用 console.log(vm),可以看到我在挂到Vue.prototype上的$loading自定义方法,
    * 但是在console.log(vm.$loading); 时会显示 undefined , 输出vue上的自身方法时,不会显示undefined。
    * 我在网上找到的解释如下:
    * 注意不要在普通js中导入后,直接console.log(),这个时候组件还没创建肯定是undefined。 (应该是这个http.js在main.js之前加载了)
    * 不过我经过经过测试,通过setTimeout()延时输出时,就不会有 就不会是undefined了。
    * 这所说明这个方法不是这个js文件一加载就执行的话,这个这样通过 import 和 new的方式还是可以用的。
    * 正好也可以满足了我的需求。嘻嘻!!
    * */
    setTimeout(()=>{
        console.log(vm.$loading); //不是undefined了
    },4000);

     

    如果不是属性或方法不是挂到  vue.prototype 原型上时,如上获取,就会出现文件。解决方法可参考:https://www.cnblogs.com/taohuaya/p/10765731.html

     

     参考文章:

      1.  https://segmentfault.com/q/1010000010269801

      2.  https://segmentfault.com/q/1010000012327314

      3.  https://segmentfault.com/q/1010000011312340

     

    转载于:https://www.cnblogs.com/taohuaya/p/10296420.html

    展开全文
  • vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640 此文章为博客园搬家而来 转载文章请注明出处! 如果只是要使用轮播...

    vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640


                  转载文章请注明出处!               
    

    如果只是要使用轮播效果的话可以参考下一些vue组件;比如这篇文章

    --------2019.7.9------------------

    请参考swiper官方插件:https://github.com/surmon-china/vue-awesome-swiper

    --------2019.7.9------------------

    方法一:( 请先使用这种方法;更新于2018-05-14)

    下载swiper:

    npm install swiper --save-dev
    

    swiper4.0使用入口:http://www.swiper.com.cn/usage/index.html

    html:

    <div class="swiper-container">
       <div class="swiper-wrapper">
           <div class="swiper-slide">Slide 1</div>
           <div class="swiper-slide">Slide 2</div>
           <div class="swiper-slide">Slide 3</div>
       </div>
       <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>
       
       <!-- 如果需要导航按钮 -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
       
       <!-- 如果需要滚动条 -->
       <div class="swiper-scrollbar"></div>
    </div>
    

    在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里(可以把官网例子的启动 var mySwiper = 删掉);

    js:

    <script>
    import Swiper from 'swiper';
    export default {
     name: 'HelloWorld',
     data () {
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     },
     mounted(){
        new Swiper ('.swiper-container', {
       loop: true,
       // 如果需要分页器
       pagination: '.swiper-pagination',
       // 如果需要前进后退按钮
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev',
       // 如果需要滚动条
       scrollbar: '.swiper-scrollbar',
     })        
     }
    }
    </script>
    

    css:

    在main.js里引入css

      import Vue from 'vue'
      import 'swiper/dist/css/swiper.css';
    

    然后我们在用到swiper的组件里写点样式

    <style scoped>
     .swiper-container {
            width: 500px;
            height: 300px;
            margin: 20px auto;
        }
    </style>
    

    -----------------------------------我是分割线-----------------------------------------------------------

    方法二:(以下是2017年10月写的,废弃)

    1.安装vue-cli

    参考地址:https://github.com/vuejs/vue-cli

    如果不使用严格语法需要在后三项打no;(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮助的)

    2.swiper下载示例代码

    参考地址:http://www.swiper.com.cn/usage/index.html

    一:单个组件使用:

    3.在刚下载好的vue-cli里的helloworld.vue进行代码编写。

    3.1html部分:
     1 <template>
     2   <div class="hello">
     3     <div class="swiper-container">
     4     <div class="swiper-wrapper">
     5         <div class="swiper-slide">Slide 1</div>
     6         <div class="swiper-slide">Slide 2</div>
     7         <div class="swiper-slide">Slide 3</div>
     8     </div>
     9     <!-- 如果需要分页器 -->
    10     <div class="swiper-pagination"></div>
    11     
    12     <!-- 如果需要导航按钮 -->
    13     <div class="swiper-button-prev"></div>
    14     <div class="swiper-button-next"></div>
    15     
    16     <!-- 如果需要滚动条 -->
    17     <div class="swiper-scrollbar"></div>
    18 </div>
    19   </div>
    20 </template>
    

    3.2 js部分:

    这里使用import引入swiper.js文件;

    swiper的启动放在mounted里执行;

    <script>
    import'../assets/js/swiper.min.js'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted(){
         var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })        
      }
    }
    </script>
    
    3.3css部分:
     1 <style scoped>
     2 @import'../assets/css/swiper.min.css';
     3     body {
     4         margin: 0;
     5         padding: 0;
     6     }
     7     .swiper-container {
     8         width: 500px;
     9         height: 300px;
    10         margin: 20px auto;
    11     }
    12    
    13 
    14     </style>
    

    4.看似大工告成,这时候会报错:

    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    

    这个错误查文档说是:

    在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。

    因为webpack 2中不允许混用import和module.exports

    我们只需要吧.babelrc文件里的第11行代码插件项"plugins": [“transform-runtime”],中的transform-runtime删掉即可;

     1 {
     2   "presets": [
     3     ["env", {
     4       "modules": false,
     5       "targets": {
     6         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     7       }
     8     }],
     9     "stage-2"
    10   ],
    11   "plugins": [],
    12   "env": {
    13     "test": {
    14       "presets": ["env", "stage-2"],
    15       "plugins": ["istanbul"]
    16     }
    17   }
    18 }
    

    5.好了问题解决;

    二:全局使用:

    6.当然也可以全局使用swiper;代码如下;

    还是在刚才的helloworld.vue进行代码编写;只是去掉js和css文件的引入!

    helloworld.vue代码:

     1 <template>
     2   <div class="hello">
     3     <div class="swiper-container">
     4     <div class="swiper-wrapper">
     5         <div class="swiper-slide">Slide 1</div>
     6         <div class="swiper-slide">Slide 2</div>
     7         <div class="swiper-slide">Slide 3</div>
     8     </div>
     9     <!-- 如果需要分页器 -->
    10     <div class="swiper-pagination"></div>
    11     
    12     <!-- 如果需要导航按钮 -->
    13     <div class="swiper-button-prev"></div>
    14     <div class="swiper-button-next"></div>
    15     
    16     <!-- 如果需要滚动条 -->
    17     <div class="swiper-scrollbar"></div>
    18 </div>
    19   </div>
    20 </template>
    21 
    22 <script>
    23 
    24 export default {
    25   name: 'HelloWorld',
    26   data () {
    27     return {
    28       msg: 'Welcome to Your Vue.js App'
    29     }
    30   },
    31   mounted(){
    32      var mySwiper = new Swiper ('.swiper-container', {
    33     loop: true,
    34     // 如果需要分页器
    35     pagination: '.swiper-pagination',
    36     // 如果需要前进后退按钮
    37     nextButton: '.swiper-button-next',
    38     prevButton: '.swiper-button-prev',
    39     // 如果需要滚动条
    40     scrollbar: '.swiper-scrollbar',
    41   })        
    42   }
    43 }
    44 </script>
    45 
    46 <!-- Add "scoped" attribute to limit CSS to this component only -->
    47 <style scoped>
    48 
    49     body {
    50         margin: 0;
    51         padding: 0;
    52     }
    53     .swiper-container {
    54         width: 500px;
    55         height: 300px;
    56         margin: 20px auto;
    57     }
    58    
    59 
    60     </style>
    

    main.js文件代码:

    常见报错解决:

    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    

    .babelrc文件里的插件项"plugins": [“transform-runtime”],中的transform-runtime删掉即可;

    展开全文
  • vuejs文件引入自定义js文件

    千次阅读 2019-08-15 15:06:00
    自定义js var provinces=[] export default provinces vue页面js引入 import riskLeft from "./index.js";...riskLeft内引入自定义js(背景:.vue文件内html和js分离) import provinces from './province-data'...

    自定义js

    var provinces=[]
    export default provinces

    vue页面js引入

    import riskLeft from "./index.js";
    export default riskLeft;

    riskLeft内引入自定义js(背景:.vue文件内html和js分离)

    import provinces from './province-data'
    export default {
     data() {
       return {
         provinces: []
       }
     },
     created() {
       this.provinces = provinces
     }
    }

    vue页面html内变量可以直接使用

    <el-option v-for="p in provinces" :label="p" :value="p" :key="p.id"></el-option>

    转载于:https://www.cnblogs.com/wwj007/p/11358044.html

    展开全文
  • 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案...
  • 一、引入vue.js 文件 1. 用脚本标签[removed] 引入外部vue.js 文件 [removed][removed] 2. 下面在一个新的 [removed][removed]标签里写vue 的代码 [removed][removed] <!--引入vue js 外部文件--> ...
  • 一、外部文件 config.js 第一种写法: // 常量的定义 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } // 函数的定义 function formatXml(text) {  return text } // 导出 {常量名、函数名} ...

    一、外部文件 config.js

    第一种写法:

    // 常量的定义
    
    const config = {
      baseurl:'http://172.16.114.5:8088/MGT2'
    }
    
    // 函数的定义
    
    function formatXml(text) {
      return text
    }
    
    // 导出 {常量名、函数名}
    export {config,formatXml}

    第二种写法:

    // 常量的定义
    export const config = {
      baseurl:'http://172.16.114.5:8088/MGT2'
    }
    
    // 函数的定义
    export function formatXml(text) {
      return text
    }

     

    二、引入 config.js 里面的常量和方法

    import {config,formatXml} from '../config' // 记得带上{}花括号

     

    展开全文
  • Vue.js 引入js文件

    2019-06-18 16:12:00
    参考链接:https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/ 参考链接:https://www.cnblogs.com/sxz2008/p/8245282.html 参考链接:https://segmentfault.com/q/1010000014685738 1、在main...
  • 引入vue.js 文件

    千次阅读 2018-09-20 17:36:24
    一、引入vue.js 文件  1. 用脚本标签&lt;script&gt; 引入外部vue.js 文件 &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; 2. 下面在一...
  • vue封装js和引入外部js文件 现在src目录下新建uitlmap.js文件
  • springboot项目中引入js文件404 项目中引入jquery.js文件报404,是因为springboot约定优于配置,静态资源文件要放在static下。 修改后如下: 猜测是下面的原因: 如果没有配置spring-mvc.xml文件,...
  • 什么时候使用(这个文件是在vue项目中单独建的一个文件) import xx from './xx/.js' 什么时候使用 import './store/store.js' 这俩有什么区别吗? ![图片说明]...
  • 引入js后,前台的路径什么的好像也没什么问题,但是到了浏览器页面,js没有起任何作用,F12检查上面提示404。找了很久也没有找到问题,救救孩子吧。不管是javaweb还是meven都一样的错误。
  • vue的history模式打包刷新404、页面空白cssjs无法加载等问题,其实是history模式配置不完全,history模式需要前端配置还需后台配置。 history模式下js、css文件路径引入的问题 PublicPath如果设置相对路径,路由...
  • Vue第二篇之在HTML中引入Vue.js,快速使用Vue

    万次阅读 多人点赞 2018-10-16 11:19:27
    直接在html文件引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。 下载vue.js 地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入v...
  • 1、如何引入js,css等文件? 比如我们想引入jQuery文件或者依赖     若是已下载好的jQuery文件,则这样引入。 打开webpack.base.conf.js,在relove加入这段代码 // 在开头引入webpack,后面的plugins...

空空如也

1 2 3 4 5 ... 20
收藏数 6,917
精华内容 2,766
关键字:

js文件引入404