vue+cli+引入js+html,详解vue-cli+es6引入es5写的js(两种方法)

详解vue-cli+es6引入es5写的js(两种方法)

学习了vue有一段日子了，vue+es6开发非常好用，vue的插件非常多，很充足，但是还是会用到引入第三方外部js的时候，但是很多人在vue-cli中的.vue文件引入es6会出很多错误，因为我们的代码是es6写的，你引入es5的js当然会出问题，那么而接下来我讲大家讲解一波，怎么引入第三方es5写的 js

方法1：

import XX from “路径”

Vue.use(XX);

这里的js文件要导出

用export default {

Vue.proprtypes.aa=function(){}

}

方法2：

js文件没有用export default{}

直接就是纯方法

解决：可以在main.js中加入以下代码，其中的方法可以全局使用。

require ('路径')

方法3：

同样是纯方法

在最后将你想用的方法用export default {}导出

此方法用在单个Vue文件中，通过import {xxx} from‘路径'引入你的方法

总结

以上所述是小编给大家介绍的vue-cli+es6引入es5写的js(两种方法),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

时间： 2019-04-17

本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下: 1.eslint简介 eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件.当有不符合配置文件内容的代码出现就会报错或者警告 2.安装exlint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件,此配置文件配置好之后,vscode编辑器自动识别

vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass

最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程. 至于vue-resource的安装和json的准备我就不赘述了... 下面是操作方法: 1.首先介绍一下项目的结构:将本地的json文件放在最外层和index.html在一起,姑且叫做data.json. 我的json数据文件大概如此: { "seller": { "name": "粥品香坊(回龙观

写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点. 引入bootstrap 1. 下载所需要的bootstrap文件. 将要使用的bootstrap文件放入src目录下的assets文件夹中. 2. 在入口文件src/main.js中引入bootstrap import './assets/boot

本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率

ESLint简介 关于ESLint的介绍网上很多,这里就简单说些有用的. ESLint的作用是检查代码错误和统一代码风格的.由于每个人写代码的习惯都会有所不同,所以统一代码风格在团队协作中尤为重要. vue-cli的eslint相关 vue-cli在init初始化时会询问是否需要添加ESLint,确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件. .eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查. .esl

编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

python的代码错误检查通常用pep8.pylint和flake8,自动格式化代码通常用autopep8.yapf.black.这些工具均可以利用pip进行安装,这里介绍传统的利用pip.exe安装和在VScode中安装两种方式. [温馨提醒] 要使用flake8或要想flake8等工具起作用,前提是必须把settings.json文件中的"python.linting.enabled"值设为"true",否则即使安装了这些工具,也起不到代码的错误提醒. [传统安

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

为了解放程序员的双手,减少重复性代码的编写,推荐使用插件:mybatis-plus-generator 进行代码自动生成.下面我将详细介绍通过mybatis-plus-generator 插件自动生成 controller.service.mapper.serviceImpl相关代码. 项目工程目录总览如下: 1. 使用 idea 创建 maven 项目,引入相关依赖,项目pom文件如下所示: <?xml version="1.0" encoding="UTF-8&qu

问题描述 我们在写代码的时候,Intellij IDEA 提供了快捷键格式化代码,以 Mac 快捷键为列子就是 ctrl + alt + L.但是习惯了还好说,没有习惯的人总是忘记格式化代码,或者压根儿就没有格式化代码习惯的人就很头疼了. 那有没有一种插件让它一直自动格式化呢?或者我把格式化的快捷键设置为回车或者常用的分号:怎么样?这样就能在写代码的时候,顺手格式化了. 前者插件我是没有找到的. 后者快捷键设置为回车是不行的,根本没法设置回车为快捷键,然后如果直接设置分号为快捷键的话,分号便没有

1.设置.vue模板 打开编辑器,点击文件 -- 首选项 -- 用户代码片段,会弹出来一个输入框. 在输入框输入vue,回车,会打开一个vue.json文件. 在里面复制以下代码: { "Print to console": { "prefix": "vue", "body": [ "", "

vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步 写结构 mui的区域滚动结构是这样的

安装 vs code, 安装 c/c++ 插件 C/C++ IntelliSense,TabNine,Bracket Pair Colorizer. 在win10下打开linux子系统设置(具体搜索教程),在应用商店安装ubutu16. 打开File->Preferences->settings,编辑settings.json. copy 以下的内容替换settings.json "C_Cpp.default.compilerPath": "/usr/bin/g+

第一步:打开pycharm,如下图所示: 第二步:File→Power Save Mode,把下面如图所示的勾去掉: 第三步:去掉勾后,不再使用省电模式,新建一个 python文件,输入需要输入的单词的前面的字母,就会自动提示了.如下图: 知识点扩展: Python代码的自动补全 我所知道的python编辑器有Pydev.Pycharm.Sublime.Eric.还有就是Vim.Emacs(听说VS也行). Pydev用过一段时间(半个月左右).Pycharm用的时间不超过2天(30天试用版).

1. 在.eslintrc.js 添加 vscode 终端启动服务 // 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ] 2.打开VS code 文件>首选项>设置>扩展>ESLint> // eslint格式