vue 项目中怎么引用js文件 5C

vue 项目中怎么引用js文件,我在vue组件里拷入了一个模板页面,css引入了,但是一些js文件无法引用

4个回答

和普通的 引入方式一样

引用外部js:
第一种方法:
1、把需要的js放到static文件夹下
2、在Index.html页面引入
3、在webpack.base.conf.js添加下面代码
4、vue组件里面引入
之后就可以正常使用js了

第二种方法:

1、把需要的js放到static文件夹下
2.组件里面直接引入

一、绝对路径直接引入,全局可用
主入口页面 index.html 中用 script 标签引入:

这样,其实就已经可以在项目中使用 jQuery 了。

mounted () {
console.log($)
}

二、绝对路径直接引入,配置后,import 引入后再使用
第一种方法有一个弊端就是:我们每一个使用了 $ 的地方,都要再前面加上 /* eslint-disable */ ,这显然是不方便的。

于是,我们有了第二种方法

还是先在主入口页面 index.html 中用 script 标签引入:

然后,我们可以在 webpack 中配置一个 externals

externals: {
'jquery': 'jQuery'
}

这样,我们就可以在每一个组件中用 import 来引用这个 jquery 了。

import $ from 'jquery'

export default {
created() {
console.log($)
}
}

三、webpack中配置 alias,import 引入后再使用
我们不需要在主入口文件 index.html 中引入 jQuery 。我们只需要在 webpack 的配置文件中,在 resolve 中为 jQuery 添加一个 alias 。

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery': resolve('static/jquery-1.12.4.js')
}
}

那么,我们就可以在任意组件中,通过 import 的方式来使用 jquery 了。

import $ from 'jquery' export default { name: 'app', created() { console.log($) } }

四、webpack 中配置 plugins,无需 import 全局可用
在第三种的基础上,如果我们增加一个 plugins 的配置,那么,我们在使用的时候,无需 import $ from 'jquery' 也可以。

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'jquery': resolve('static/jquery-1.12.4.js')
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
})
]

这个时候,我们在项目中,就可以直接使用 $ 了。

export default { name: 'app', created() { /* eslint-disable*/ console.log($) } }

结论
第一种和第四种方式使用的时候,不需要 import ,全局直接可用;第二种和第三种方式使用的时候,需要先 import 。

1、现在的项目一般都会加入 ESLint 代码检查,所以推荐使用第二种或者第三种方式(这两种方式在使用的时候都需要先 import 引入,然后再使用,也就不存在 ESLint 报 not defined 的问题)

2、如果你的项目没有使用 ESLint ,第一种和第四种也是不错的选择。

3、如果你使用了 ESLint,仍然想使用第一种或者第四种方式,那么,我们就得在 ESLint 的配置文件中添加规则:'no-undef': 0

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
springboot项目中js引用其他js
直接用/,然后加上static目录下的路径 原文链接:http://blog.maptoface.com/post/150
Vue项目中引用font-awesome图标库
下载 从官网下载压缩包,我下载的是font-awesome-4.7.0,解压后copy到vue项目的static目录下,打开font-awesome-4.7.0文件夹,发现有css,fonts,less,scss等目录,我们只需要css和fonts目录,其余的删除不要。 使用 在main.js中引用css import '../static/font-awesome-4.7.0/css/f...
vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下。安装echarts, npm install echarts -S //或 cnpm install echarts -S 安装完成之后,我们就可以开始引入我们需要的echarts了,接下来介绍几种使用echarts的方式。 全局引用: 首先在main.js中引入...
项目中新建js文件
javasc
vue项目中引用样式文件出现: This dependency was not found:
vue项目中引用样式文件出现:This dependency was not found:* common/stylus/index.styl in ./src/main.jsTo install it, you can run: npm install --save common/stylus/index.styl解决办法:在 build\webpack.base.conf.js中resolve...
Vue项目中的一些问题
相关文件说明 package.json:记录项目中所需要的模块,在执行npm install时,node会先从package.json文件中读取所有dependencies信息,然后根据dependencies中的信息与node_modules中的模块进行对比,没有的直接下载,已有的检查更新。package.json文件只记录你通过npm install方式安装的模块信息,而这些模块所依赖的其他...
bootstrap在项目中的引用
-
vue在项目中的应用
1,为什么要用vue 大前端目前已经到一个空前的繁荣阶段,各种框架类库层出不穷,我想每选择一个框架,肯定都能找到高度同质化的两到三个框架。那么在目前mvvm盛行的前端架构下,我们为什么选择了vue,而不去用react,不用angular呢? 首先他们都是非常典型的前端mvvm框架,很好的解决了业务逻辑中view和model之间的关系,用到...
vue项目中的小记
1,启动项目时,如果设置nigx,则先启动nigx,然后在启动项目,当启动完成后,运行ip与端口皆与nigx中的nigxconfig文件配置代理ip和端口都相同,则成功启动! 2,在单独模块中调用接口,首先引入接口文件:import { $ajaxExample } from "@/api";  然后直接调用: $ajaxExample.api(obj,function(res){     ...
vue项目中this指向
实际项目过程中。在data里面定义好了 phone的值。在发送ajax请求后,this.phone的值便拿不到了。这里我axios去请求。then的回调是用es5的写法写的。发送请求前,this.phone还有值,发送请求后this.phone的值就有问题了。纠其原因是es5 的写法,this的值发生了变化。指向undefined。而这里我们的this 需要指向vue实例这里需要再继续补充箭头函数
vue项目中的路由配置
公司的项目使用vue脚手架来搭建,是属于后台管理系统。功能页比较多,就使用vue路由来进行跳转;个人比较习惯上面这种方式放置路由文件,并且使用懒加载的模式来配置,如下:import Vue from 'vue' import Router from 'vue-router' //import Login from '.././views/login.vue' //import NotFound f...
vue项目中的坑
1.scoped     scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。 ( 给HTML的DOM节点加一个不重复data属性(形如:data-v-19fca230)来表示他的唯一性 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的...
vue 项目中的scoped
加了scoped的样式,在打包后,就会给同一个带有scoped的style里面的样式增加一段特殊标识,看下面例子就晓得了: <style scoped> .one h1{ font-size: 50px; color: red; } h2{ color: green; } h4{ ...
vue项目中的问题
1.项目中用的是什么方式来实现响应式布局:用的rem。 在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:    fnResize(); window.onresize = function () { fnResize(); } function fnResize() { var deviceWidth = document.documen...
在项目中引用CefSharp
VS2013的.net框架最好安装cefsharp的49.0.0版本,最新版安装不上。(所以管理NUGET程序包视窗里的最新版是安装不上的)   【1】打开NUGET命令行控制台 Install-Package CefSharp.WinForms -Version 49.0.0     【2】安装后引用里没有出现cefsharp   需要右键引用-添加引用 程序根目录\packag...
项目中的vue知识点
1.vue-router页面的跳转    在router文件夹下的index.js中:    import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City from '@/pages/c...
Vue项目中的 “=>”什么意思!!!!!!!!!!!!!!!!!!!!!!!!
Vue项目中的 “=>”什么意思!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
项目中引用问题
我使用VSS源码管理器做项目,web层可以访问到Model层,但是就是访问不到BLL、DAL层的新建的类,rn 不知道为什么,很奇异??引用都正确!
怎么在项目中引入文件?
例如现有的源代码,一些.H,.CPP文件,怎么加入当前项目?
vue 引用js文件方法
vue 引入jQuery组件,在webpack.base.conf.js以插件方式引入, plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ]...
vue项目中引入外部css以及js文件的方法
引入css <template></template> <style scoped>  @import "../assets/common/common.css"; </style>   引入js 1,在需要的页面引入, import '../../../static/js/jquery-1.9.1.min.js'   //jq插件 ...
VUE 项目中引入外部js文件(CND引入)
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script> 第二步 在项目找到 build >webpack.base.conf.j...
vue项目中package-lock.json文件作用
从字面意思看起锁定作用,就是锁定依赖模块和子模块的版本号。 package-lock.json是新版本node支持的文件,在执行npm install时,先读取package.json中的依赖,再读取package-lock.json中的版本号,从而来决定安装和更新。 ...
如何引用其他项目中的RDLC文件?
系统中的打印格式都是用RDLC做的,后来为了维护方便,把所有打印格式和报表都独立出来另外做一个项目,以前直接使用reportViewer.LocalReport.ReportEmbeddedResource="项目.报表名.RDLC",现在把路径改为新的项目路径之后提示找不到报表文件。rn如果使用reportViewer.LocalReport.ReportPath="报表名.rdlc"需要把文件复制到用户本地,可行性也不高。rn不知道各位有没有更好的解决方案?
springboot项目中如何引用Jquery文件
如图,index.html页面要引用下面的jquery文件 则 index.html 页面中引用的写法为如下: <script type="text/javascript" src="/js/mobile/jquery-1.8.3.min.js"></script> ...
如何引用加在项目中的ico文件?
网上有说是:rnType t =this.GetType();rnIcon icon=new Icon(t, "iconname.ico");其中t要保证与资源具有相同的命名空间。rnrn不过经过测试这种方法是错误的!!!郁闷中!
关于项目中的文件路径怎么引用。
现在有个项目叫Manage。里面有个文件夹skin,文件夹有个Deep.sskrnrn现在在代码里面。要获取这个ssk的路径。应该怎么表示?
上传文件到tomcat 项目中怎么引用
myeclipse 下的项目,servlet做的上传,图片之后是到tomcat中的,项目中没有,那我在页面要调用的时候怎么办?
项目中.js笔记
javascript
项目中常用js
项目中常用js,是一个工具集,比如分页,表的创建,对一些控件的操作。
js文件怎么引用is
js文件怎么引用其他is文件rn可以吗会不会矛盾rn可以的话用什么方法rn有人会的话可以给我看看列子吗
在vue项目中使用vuex
一个简单的例子 在vue项目中使用vuex 首先需要先了解vuex中的store,然后在store中又有state,getter,action,mutation这几个参数。 如何安装vuex,请查看vue官网安装vuex 下面演示一个简单的使用vuex的实例。 首先在state中,定义一个参数: const state = { id: null, } 我们按照习惯来写,新建一个mutat...
vue项目中使用scss
一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。(我自己就是一个)。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何在vue项目中引入scss(引入less也...
vue项目中引入echarts
在vue-cli脚手架工具搭建的项目中引入echarts 前提:通过webpack/webpack-simple初始化构建的项目 全局引入 1、安装依赖 npm install echarts --save 这种方式可以将安装的依赖添加到配置文件中,以后项目更改目录可以通过npm install自动下载 2、文件引入 main.js import echarts from 'echarts'...
vue项目中动态改变baseUrl
我的问题是,请求不同的api,有几个别的api域名不一样,需要根据不同的api改变对应的域名 1.采用vuex全局更新,不是太理想,要刷新才能更换 2.最终使用比较笨的方法 写了两个request文件,不同的api使用不同的request ...
vue 项目中常见的几个问题
(1).H5页面在iOS网页中手机号码颜色改变 H5页面在iOS网页中的数字被识别为电话号码,原因在于Safari浏览器的问题:解决该问题只需在head标签中添加如下代码即可解决。 <metaname="format-detection"content="telephone=no"> 在Vue上的具体代码位置如图: 项目路径 FF730ACF-F192-45...
vue项目中配置stylelint
stylelint 是css的代码检查工具, 方便规范css带啊吗规范 依赖包 npm i stylelint stylelint-webpack-plugin stylelint-config-standard --save-dev 配置文件 webpack.dev.conf.js const StyleLintPlugin = require('stylelint-webpack...
vuex在vue项目中的使用
一.安装依赖 npm install vuex --save 或者 cnpm install vuex --save 二.引入 为了便于维护。在vue项目中的src目录下新建目录store, 在改store目录下新建index.js文件和一个modules目录 index.js文件如下 import Vue from "vue" import Vuex from "vuex" import ac...
vue项目中favicon.ico的使用
1.在index.html中引入ico文件 <link rel="icon" href="./favicon.ico" type="image/x-icon"> 2.在build/webpack.prod.conf.js中,粘如如下代码。 new HtmlWebpackPlugin({ filename: config.build.index, ...
vue项目中引入jquery
安装jquery npm install jquery 在webpack.base.conf.js中加入一行代码 var webpack = require("webpack") 在webpack.base.conf.js中module.exports的最后加入这行代码 plugins: [   new webpack.optimize.CommonsChunkPlugin('co...
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池

相似问题

3
vue如何为多页面项目配置自己的404页面以及自定义链接
3
在vue项目中,在入口主文件index.js中引入less样式文件报错
2
为什么我添加contextPath之后就不能访问static文件下面的index.html呢
4
文件下载到tomcat缓存文件夹后不能在网页直接读取
1
自己用webpack构建vue项目报错,求帮助万分感谢
4
vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空白
1
vue cli 3.0 文件压缩如何去掉console.log?
2
我在vue.js命令中创建vue项目时乱码了,是什么原因??该怎么解决呢?
5
vue ie打开显示空白页报错:文件: index.js,行: 23994,列: 1 SCRIPT1002: 语法错误
3
vue-cli创建的项目中没有build文件夹,该如何配置使用模拟数据
0
Vue-cli 的热更新无效问题
1
vue-cli 项目发布到Tomcat下,读取不到静态资源
1
Vue main.js文件引入的时候 什么时候需要import xx from 'xx'
2
webpack问题(将能正常运行的项目除了node_modules文件复制了一份,然后cnpm i之后装完之后不能运行)
1
vue两个导航组件之间传值或者相应的解决办法,在线等求告知。
6
使用Django+vue+element-ui搭建项目时,element-ui的样式不生效,如何解决?
1
在VUE项目中引用WebUploader,打包以后运行报WebUploader is not defined错误信息,请教一下是什么原因?
0
前端基于框架(类似vue-cli || ionic) 后的css规范问题
2
Vue2.0使用ElementUI的组件报错
3
vue cli3搭建的项目里使用axios引入本地json一直404