您的当前位置:首页正文

webpack+vue-cli项目中引入外部非模块格式js的方法

2023-12-07 来源:站点网
导读vue引入js文件的方法有三种分别是:在vue-cli webpack全局中引入jquery,通过vue组件来引入js文件,通过单vue页面引用内部js文件。【推荐课程:Vue教程】1、vue-cli webpack全局引入jquery(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)(2)在webpack.base.conf.js里加入var webpack = re

在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了。所以我更倾向于在webpack中引入外部js文件。

1.直接引用

vue-cli 外部非模块格式js

Note:(红色标注部分)

位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录;

位置2:需要用到位置一中定义的变量Swiper;

位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下;

以上这篇webpack+vue-cli项目中引入外部非模块格式js的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

vue引入js文件有哪几种方法

vue引入js文件的方法有三种分别是:在vue-cli webpack全局中引入jquery,通过vue组件来引入js文件,通过单vue页面引用内部js文件。

【推荐课程:Vue教程】

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

var webpack = require("webpack")(3)在mole.exports的最后加入

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

jQuery: "jquery",

$: "jquery"

})

] (4) 在main.js 引入就ok了 (测试这一步不用也可以)

import $ from 'jquery'(5)然后 npm run dev 就可以在页面中直接用$ 了.

2、vue组件引用外部js的方法

项目结构如图:

content组件代码:

<template>

<div>

<input ref='test' id="test">

<button @click='diyfun'>Click</button>

</div>

</template>

<script>

import {myfun} from '../js/test.js' //注意路径

export default {

data () {

return {

testvalue: ''

}

},

methods:{

diyfun:function(){

myfun();

}

}

}

</script>test.js代码:

function myfun() {

console.log('Success')

}

export { //很关键

myfun

}用到了es6的语法。

3、单vue页面引用内部js方法

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)

(2) 在需要引用的vue页面import引入$,然后使用即可

这个图中有的警告,如果把console.log($)改成这样:

export default{

mounted: function(){

console.log($)

}

}就不会有了,原因可能是得符合vue中js的写法吧

关于Vue-cli引入外部js资源文件失败的一点思路

首先申明我是window系统下Vue-cli 4.5.3版本,脚手架整体基于vue2内核。

1.正常js文件如果有使用export向外暴露对象,将js放在src/assets都是可以通过import直接引入。但有有些情况下我们需要导入第三方的js文件,例如近期我在做的阿里云点播视频上传SDK,包括最近在学习的ThreeJs,如果单单只是在public中index.html通过<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>引入,是不够的还需要在具体vue页面引入:

这也是我尝试两天才成功,走了些弯路,希望帮助到有同样问题的打工人,共勉!

详解如何使用webpack在vue项目中写jsx语法

本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下:

我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。

data: {

msg: 'Hello world'

},

render (h) {

return h(

'div',

{ attrs: { id: 'my-id' },

[ this.msg ]

);

}

渲染后的内容为:

<div id='my-id'>Hello world</div>

Vue 2.0中的render为我们开启了一片新的天地,赋予了我们无限的想象力。比如,我们可以把React中用到的JSX语法应用到Vue中来。接下来,我们就聊聊怎么在Vue项目中使用JSX.

JSX简介

JSX是基于Javascript的语言扩展, 它允许在Javascript代码中插入XML语法风格的代码。如下所示:

data: {

msg: 'Hello world'

},

render (h) {

return (

<div id='my-id'>,

{ this.msg }

</div>

);

}

但值得注意的是,浏览器默认是解析不了JSX的,它必须要先编译成标准的JavaScript代码才可以运行。就像我们需要将sass或者less编译为CSS代码之后才能运行一样。

在Vue中使用JSX

Vue框架并没有特意地去支持JSX,其实它也没必要去支持,因为JSX最后都会编译为标准的JavaScript代码。既然这样, 那Vue和JSX为什么能配合在一起使用呢? 很简单, 因为Vue支持虚拟DOM, 你可以用JSX或者其他预处理语言,只要能保证render方法正常工作即可。

Vue官方提供了一个叫做babel-plugin-transform-vue-jsx的插件来编译JSX, 我们稍后介绍如何使用它。

为什么要在Vue中使用JSX

为什么要再Vue中使用JSX ? 其实Vue并没有强迫你去使用JSX, 它只是提供了一种新的方式而已。正所谓萝卜青菜,各有所爱。有的人觉得在render方法中使用JSX更简洁,有的人却觉得在JavaScript代码中混入HTML代码很恶心。反正你喜欢就用,不喜欢就不用呗。废话少说,我们先看一个简单的应用:

script.js

new Vue({

el: '#app',

data: {

msg: 'Click to see the message'

},

methods: {

hello () {

alert('This is the message')

}

}

});

index.html

<div id="app">

<span

class="my-class"

style="cursor: pointer"

v-on:click="hello"

>

{{ msg }}

</span>

</div>

代码很简单,就是在页面上显示一个span, 里面的内容为"Click to see the message"。当点击内容时,弹出一个alert。我们看看用render怎么实现。

用Vue 2.0中的render函数实现

script.js

new Vue({

el: '#app',

data: {

msg: 'Click to see the message'

},

methods: {

hello () {

alert('This is the message')

}

},

render (createElement) {

return createElement(

'span',

{

class: { 'my-class': true },

style: { cursor: 'pointer' },

on: {

click: this.hello

}

},

[ this.msg ]

);

},

});

index.html

<div id="app"><!--span will render here--></div>

使用JSX来实现

script.js

new Vue({

el: '#app',

data: {

msg: 'Click to see the message.'

},

methods: {

hello () {

alert('This is the message.')

}

},

render: function render(h) {

return (

<span

class={{ 'my-class': true }}

style={{ cursor: 'pointer' }}

on-click={ this.hello }

>

{ this.msg }

</span>

)

}

});

index.html和上文一样。

babel-plugin-transform-vue-jsx

正如前文所说, JSX是需要编译为JavaScript才可以运行的, 所以第三个样例需要有额外的编译步骤。这里我们用Babel和Webpack来进行编译。

打开你的webpack.config.js文件, 加入babel loader:

loaders: [

{ test: /.js$/, loader: 'babel', exclude: /node_moles/ }

]

新建或者修改你的.babelrc文件,加入 babel-plugin-transform-vue-jsx 这个插件

{

"presets": ["es2015"],

"plugins": ["transform-vue-jsx"]

}

现在运行webpack, 代码里面的JSX就会被正确的编译为标准的JavaScript代码。

站点网还为您提供以下相关内容希望对您有帮助:

vue引入js文件有哪几种方法

vue引入js文件的方法有三种分别是:在vue-cli webpack全局中引入jquery,通过vue组件来引入js文件,通过单vue页面引用内部js文件。【推荐课程:Vue教程】1、vue-cli webpack全局引入jquery(1) 首先 npm install jquery --sav...

详解如何使用webpack在vue项目中写jsx语法

data: { msg: 'Hello world'},render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] );}渲染后的内容为:Hello worldVue 2.0中的render为我们开启了一片新的天地,赋予了我们无限的...

怎么使用webpack构建vue.js单页应用

作为一个完整的Demo,系列文章中的完整项目,会实现一个文件上传和管理的单页面Web应用1 安装依赖包项目中使用了vue.js,webpack,gulp,还有饿了么开源的elementUI,因为使用了es2015,所以还需要引入babel将es6的js代码转换...

vue 如何将本地的另一个js项目打成dist并加入到module中?

在Vue项目中引入另一个JS项目:在Vue项目的入口文件(如main.js)中,使用import语句引入另一个JS项目的入口文件或模块。例如,假设另一个JS项目打包后的入口文件为bundle.js,可以在main.js中添加以下代码:javascriptCopy c...

详解如何在vue-cli中使用vuex

通过 store 选项如果vue-cli搭建成功,在src目录下会有一个main.js文件,main.js的主要作用是把项目中最顶层的app.vue组件挂载到DOM中,其他所有的组件都可以看做是app.vue的子组件。 在main.js中,做如下操作import Vue...

webpack 配置scss||less全局样式(自定义的,vue-cli2/3)

直接在webpack config 中的 sassResources 数组中添加导入的文件。 以 scss 为例, 在自己配的webpack,和vue-cli2/3中配置全局样式引入 ( sass-resources-loader 也可以用来配置 less )确保package.json有 node-...

vue2.0怎样开发多页面

vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下...

vue.config.js中的webpack配置,优化及多页面应用开发

vue-cli3中的webpack与vue多页面应用开发 相关参数:封装 很好的pwa插件相关配置 pwa介绍及使用 当运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面...

vue项目导入本地json文件的方法

vue项目导入本地json文件的2种方法 一、通过网络请求导入 步骤:1.找到vue项目目录下的build/webpack.dev.conf.js文件 2.3.4.在页面钩子函数触发时,调用 created() {         this.$http...

vue路由组件按需加载的几种方法小结

1. 普通加载使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如:import Hello from '@/components/Hello'import Boy from '@/components/Boy'import Girl from '@/components/Girl'这样...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top