vue.js 怎么引用 JS 文件? 下面本篇文章主要介绍了 vue 引用 JS 文件的多种方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
1,vue-cli webpack 全局引入 jQuery
(1) 首先 NPM install jQuery --save (--save 的意思是将模块安装到项目目录下, 并在 package 文件的 dependencies 节点写入依赖.)
(2) 在 webpack.base.conf.JS 里加入
var webpack = require("webpack")
(3) 在 module.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 的写法吧
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/16959.html