VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
2017-11-30 15:29
891 查看
vue 中,将页面分为了各个组件,我们写好组件,就可以将这个组件运用到其他各个页面中,每个组件都是一个 .vue 文件,里面有各自的 Html 结构,样式表和 JS 代码。这样的项目结构很清晰,维护起来也很方便。
但是最近在写项目的时候发现一个问题,我们有一些公共的样式和 JS 代码,在以前只需要直接引入相关文件就可以使用了,所以我很自然的想到在入口文件,也就是 index.html 中用传统的方式直接引入文件,然后发现没有起作用,所以这个办法是行不通的。
搜索了一番,发现有二个办法可以引入外部的文件供组件使用:
一:在组件的 .vue 文件中引入外部文件,原文链接
二:全局引用外部文件,原文链接
具体的做法就是在 main.js 中用 import 引入想要使用的文件,比如要引入一个全局样式文件,可以这样:
这里要注意的是文件的层级关系,如果是同级的文件或文件夹,使用 ./ ,如果是上一级,则是 ../
引入 CSS 比较简单,引入 JS 就比较麻烦了。如果只是一些自己写的方法和工具类,有一个最简单粗暴的方法就是直接在 index.html 这个入口文件中通过传统方法引入,如:
这样就做到了全局引入 common.js ,同样要注意目录层级的问题。通过这种方式引入的时候有一个需要特别注意的地方就是:要把需要引入的文件放在 static 文件夹下面,否则会报错。
这个方法同样也适用于 CSS 文件,不过这个方法也有一个弊端,就是不能向在组件里面那样修改了即时刷新,放在 index.html 入口文件里面的东西,需要刷新页面才能看到效果。所以如果需要即时刷新的话,还是放在组件里面比较好。
所以总结下来就是,对于要全局引用的 CSS,最好是在 main.js 中通过 import 引入,这样能够让修改后的 CSS 样式即时刷新,而 JS 一般都是需要主动调用的,所以可以放在 index.html 里面直接引入即可。
但是对于 Jquery 的话,在 index 文件中直接引入的方式好像是有问题的,在 index 中引入的 JQuery 只能在 index 文件中使用,在组件中是没有效果的。所以 JQuery 需要采用另外i的方式引入。
虽然 vue 中不推荐使用 JQuery ,但是平时用的多了,突然不用的话有些不方便,而且以前收集整理的一些工具类中都或多或少的有用到 JQuery,如果要全部改回原生的那就更麻烦了,所以引入 JQuery 就是一个必须要做的事情了。
vue-cli 怎么引入 JQuery
vue-cli 中,如何引入 JQuery 插件
vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
如何在 Vue.js 中使用第三方库
照着上面的方法,终于将 JQuery 引入到项目中,在写代码的时候也会有提示出来,但是 JQuery 代码好像没有效果,还没找到原因,困惑中,,,,,,,,
但是最近在写项目的时候发现一个问题,我们有一些公共的样式和 JS 代码,在以前只需要直接引入相关文件就可以使用了,所以我很自然的想到在入口文件,也就是 index.html 中用传统的方式直接引入文件,然后发现没有起作用,所以这个办法是行不通的。
搜索了一番,发现有二个办法可以引入外部的文件供组件使用:
一:在组件的 .vue 文件中引入外部文件,原文链接
二:全局引用外部文件,原文链接
具体的做法就是在 main.js 中用 import 引入想要使用的文件,比如要引入一个全局样式文件,可以这样:
import './css/common.css'
这里要注意的是文件的层级关系,如果是同级的文件或文件夹,使用 ./ ,如果是上一级,则是 ../
引入 CSS 比较简单,引入 JS 就比较麻烦了。如果只是一些自己写的方法和工具类,有一个最简单粗暴的方法就是直接在 index.html 这个入口文件中通过传统方法引入,如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>app</title> </head> <script type="text/javascript" src="./static/common.js"></script> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
这样就做到了全局引入 common.js ,同样要注意目录层级的问题。通过这种方式引入的时候有一个需要特别注意的地方就是:要把需要引入的文件放在 static 文件夹下面,否则会报错。
这个方法同样也适用于 CSS 文件,不过这个方法也有一个弊端,就是不能向在组件里面那样修改了即时刷新,放在 index.html 入口文件里面的东西,需要刷新页面才能看到效果。所以如果需要即时刷新的话,还是放在组件里面比较好。
所以总结下来就是,对于要全局引用的 CSS,最好是在 main.js 中通过 import 引入,这样能够让修改后的 CSS 样式即时刷新,而 JS 一般都是需要主动调用的,所以可以放在 index.html 里面直接引入即可。
但是对于 Jquery 的话,在 index 文件中直接引入的方式好像是有问题的,在 index 中引入的 JQuery 只能在 index 文件中使用,在组件中是没有效果的。所以 JQuery 需要采用另外i的方式引入。
虽然 vue 中不推荐使用 JQuery ,但是平时用的多了,突然不用的话有些不方便,而且以前收集整理的一些工具类中都或多或少的有用到 JQuery,如果要全部改回原生的那就更麻烦了,所以引入 JQuery 就是一个必须要做的事情了。
在 vue 中引入 JQuery 的方法
关于如何引入 JQuery 及其插件的问题,找了几篇文章vue-cli 怎么引入 JQuery
vue-cli 中,如何引入 JQuery 插件
vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
如何在 Vue.js 中使用第三方库
照着上面的方法,终于将 JQuery 引入到项目中,在写代码的时候也会有提示出来,但是 JQuery 代码好像没有效果,还没找到原因,困惑中,,,,,,,,
相关文章推荐
- 学习Altas 笔记[js调用重载的方法出错,如何处理]
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- Excel学习笔记003-001:如何在VBA程序中调用Excel函数进行运算
- 慕课网《如何用CSS进行网页布局》视频学习笔记
- vue.js学习笔记:如何加载本地json文件
- 学习Altas 笔记[js调用重载的方法出错,如何处理]
- 学习Altas 笔记[js调用重载的方法出错,如何处理]
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- Excel学习笔记002-002:工作表内及工作表间、工作簿间单元格数据的复制、剪切、粘贴;如何进行成绩排序。
- 学习Altas 笔记[JS简单调用服务端方法]
- Android源码学习之四-ActivityGroup是如何对嵌入的Activitys进行管理的
- 如何用js实现,在一个页面有个输入文档框,然后点击查询按扭后,调用IE的查询功能在当前页面进行查询
- Sharepoint学习笔记—Site Definition系列--8、如何在Site Definition中引入Master Page (2、Css等资源的引入)
- Android源码学习之四-ActivityGroup是如何对嵌入的Activitys进行管理的
- 学习笔记一:如何:对某词在字符串中出现的次数进行计数 (LINQ)
- 黑马程序员之HTML学习笔记:有关css和js针对不同浏览器兼容的问题
- Android源码学习之四-ActivityGroup是如何对嵌入的Activitys进行管理的
- [iphone 开发学习笔记]Object-C和C语言最大的区别也是最大的扩展-----消息(即如何调用一个对象中的函数)
- 如何对一个博客系统进行CSS管理?