vue css，js引入方式
vue 2017-11-16 11:42:19

引入CSS文件的常用方式：

JavaScript Code复制内容到剪贴板
  1. import '../../../../course/html/css/class-library.css'  

 

各页面中，会有冲突，A页面跳到B页面，受到A页面的影响，B页面还残留着B页面的样式，解决方式：

XML/HTML Code复制内容到剪贴板
  1. <style scoped src="../../../../course/html/css/class-library.css"></style>  

scoped 只对当前页面起作用

 

一.可以用npm下载的

现在以jquery为例子：

1 先在package.json中的dependencies中写入“jquery”:“^3.2.1”(jquery版本)

2 在npm中搜索jquery下载

3 在webpack.base.config.js加入

JavaScript Code复制内容到剪贴板
  1. var webpack = require('webpack');  
  2. //在module.exports中加入  
  3.   
  4. plugins: [  
  5.     new webpack.optimize.CommonsChunkPlugin('common.js'),  
  6.     new webpack.ProvidePlugin({  
  7.         jQuery: "jquery",  
  8.         $: "jquery"  
  9.     })  
  10. ]  

4 重新npm run dev

然后就已经加入jquery了

 

二.直接引入的 不能用npm下载的

在view.vue中引入swiper.css和swiper.js文件

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2. ...  
  3. </template>  
  4. <script>  
  5. import swiper from './swiper.js'  
  6. import common from '../common.vue'  
  7. export default {  
  8.     data(){  
  9.         return{  
  10.         }  
  11.     },  
  12.     mounted:function(){  
  13.         this.swippertab();  
  14.     },  
  15.     methods:{  
  16.         swippertab(){  
  17.              var swiper = new Swiper('.swiper-container', {  
  18.                 pagination: '.swiper-pagination',  
  19.                 slidesPerView: 3,  
  20.                 paginationClickable: true,  
  21.                 spaceBetween: 30  
  22.             });  
  23.         },  
  24.     }   
  25. }  
  26. </script>  
  27. <style scoped>  
  28. @import './swiper.css';  
  29. </style>  

注意一下的就是在swiper.js中需要改一下代码，在最后面改成用export导出Swiper,并且代码原有的amd格式的导出需要注释掉

 

demo：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div>  
  3.       <input ref='test' id="test">  
  4.       <button @click='diyfun'>Click</button>  
  5.   </div>  
  6. </template>  
  7. <script>  
  8. import {myfun} from '../js/test.js' //注意路径  
  9. export default {  
  10.   data () {  
  11.     return {  
  12.       testvalue: ''  
  13.     }  
  14.   },  
  15.   methods:{  
  16.       diyfun:function(){  
  17.           myfun();  
  18.       }  
  19.   }  
  20. }  
  21. </script>  

JS：

JavaScript Code复制内容到剪贴板
  1. function myfun() {  
  2. console.log('Success')  
  3. }  
  4. export { //很关键  
  5.   myfun  
  6. }  

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/211.html

上一篇 vue foreach 循环数据
下一篇 vue 拖拽排序组件——Vue.Draggable / 自定义指定的随机拖拽
相关的文章
Powered by yoyo苏ICP备15045725号