原文：https://blog.csdn.net/zgh0711/article/details/78664262

vue 中，将页面分为了各个组件，我们写好组件，就可以将这个组件运用到其他各个页面中，每个组件都是一个 .vue 文件，里面有各自的 Html 结构，样式表和 JS 代码。这样的项目结构很清晰，维护起来也很方便。

但是最近在写项目的时候发现一个问题，我们有一些公共的样式和 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 中使用第三方库

【转】VUE 爬坑之旅-- 如何对公共JS，CSS进行统一管理，全局调用的更多相关文章

  1. 记一次项目使用webuploader爬坑之旅

       因前端页面开发使用的为VUE开发,又要支持IE9,遂只有基于webuploader封装一个上传组件.地址:https://github.com/z719725611/vue-upload-web ...

  2. Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  3. Vue 爬坑之路（九）—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  4. Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  5. Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  6. vue踩坑之旅 -- computed watch

    vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...

  7. Vue 爬坑之路（八）—— 使用 Echarts 创建图表

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...

  8. vue爬坑之路（插件安装）

    npm install vue-table-with-tree-grid --save import ZkTable from 'vue-table-with-tree-grid' Vue.use(Z ...

  9. vue环境下安装npm,启动npm 修改js,css样式

    vue环境下修改js,css样式 1.在所在的项目项目的resource 文件夹下面,shift + 鼠标右键--在此处打开命令行窗口: 2.在打开的窗口执行: 安装npm:npm install 启 ...

随机推荐

  1. 版本管理工具Git（三）Gitlab高可用

    高可用模式 企业版 社区版 我们这里说一下成本比较低的主备模式,它主要依赖的是DRBD方式进行数据同步,需要2台ALL IN ONE的GitLab服务器,也就是通过上面安装方式把所有组件都安装在一起的 ...

  2. 从0到1，了解NLP中的文本相似度

    本文由云+社区发表 作者:netkiddy 导语 AI在2018年应该是互联网界最火的名词,没有之一.时间来到了9102年,也是项目相关,涉及到了一些AI写作相关的功能,为客户生成一些素材文章.但是, ...

  3. spring源码分析之spring-jdbc模块详解

    0 概述 Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作.下表描述了哪些是spring帮助我们做好的,哪些是我们要做的. Action  Spring  You ...

  4. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（13）- 从Serial(1-bit SPI) EEPROM/NOR恢复启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Serial EEPROM/NOR恢复启动. 在前几篇里痞子衡介绍的Boot Device都属于主动启 ...

  5. 痞子衡嵌入式：飞思卡尔Kinetis系列MCU启动那些事（3）- KBOOT配置(FOPT/BOOT Pin/BCA)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔Kinetis系列MCU的KBOOT配置. KBOOT是支持配置功能的,配置功能可分为两方面:一.芯片系统的启动配置:二.KBO ...

  6. 跨站脚本攻击xss学习

    0.认识跨站脚本 举一个跨站脚本的简单例子. 假设一个页面将用户输入的参数直接显示到页面之中.(比如有如下代码) 在实际的浏览器中,在param中提交的参数正常会展示到页面之中.比如输入下面的URL: ...

  7. Android Stuido xml使用app属性没有提示代码

    解决方法: 打开file->invalidate Caches,之后build->rebuild project 2.重启Android Studio

  8. MySQL Err(1024):Lock wait timeout exceeded; try restarting transaction

    查看事务是否占用被锁: SELECT * FROM information_schema.INNODB_TRX;查看里面的 trx_mysql_thread_id字段 show full proces ...

  9. ios端的Safari浏览器中，输入框加入readonly之后，点击还能获取焦点的解决办法。

    事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘.如果是一次性开发的话, 我肯定把这个输入框写成一个div或者其他的元素,然后点击之后出现我们的模拟键盘,这样就不 ...

  10. 2-SAT速成

    本文只做总结性说明 2-SAT 2-SAT是k-SAT问题的一种,k-SAT问题在\(k>=3\)时已经被证明是NP完全问题 2-SAT问题定义比较简单 有n个布尔变量\(x_1-x_n\).给 ...