Vue导入非模块化js_Vue导入js扩展

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(1336)   2024-03-16 09:29:35

前言

有时候,我们需要对js的原生对象进行扩展,达到全局使用更方便的效果。而这种扩展往往并非vue模块化的js格式。下面讲解vue项目中如何导入非模块化js

扩展js

 

/****
 * 扩展日期格式化
 * 使用参考:
 * var time1 = new Date().Format("yyyy-MM-dd");
 * var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");
 * @param fmt
 * @returns {*}
 * @constructor
 */
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

导入方一(推荐)

在main.js文件中导入

import  "@/utils/expandJs"

导入方式二

在public的index.html中导入。
在public目录下创建一个js目录并将扩展js放在里面,然后index.html通过<script>标签引入
目录参考

index.html引入参考

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="<%= BASE_URL %>js/extends.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3f5dc6c9fe58fdeef1729a040f5da333"></script>
  </body>
</html>

 

 


 

 

 

地址:https://www.leftso.com/article/916.html

相关阅读

前言有时候,我们需要对js的原生对象进行扩展,达到全局使用更方便的效果
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文&lt;body&gtl;     &lt;di...
1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...
vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量&lt;li  v-if="Object.keys(searchResultDataLis...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } ...