精华内容
下载资源
问答
  • 实际项目就是一个单页面。因此,我觉得用gulp足够,并且不需要webpack和vue-cli因为没有必要使用组件。 先来说一下项目结构 1. 然后来看看我的包管理package.json都用了啥,你也可以复制下来,npm install进行...

    实际项目就是一个单页面。因此,我觉得用gulp足够,并且不需要webpack和vue-cli因为没有必要使用组件。

    先来说一下项目结构

    1.

    然后来看看我的包管理package.json都用了啥,你也可以复制下来,npm install进行安装就行了。

    {
      "name": "webRoot",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-preset-es2015": "^6.24.1",
        "gulp": "^3.9.1",
        "gulp-babel": "^7.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.0.0",
        "gulp-htmlmin": "^3.0.0",
        "gulp-imagemin": "^3.3.0",
        "gulp-jshint": "^2.0.4",
        "gulp-less": "^3.3.2",
        "gulp-minify-css": "^1.2.4",
        "gulp-notify": "^3.0.0",
        "gulp-rename": "^1.2.2",
        "gulp-uglify": "^3.0.0",
        "imagemin-pngcrush": "^5.1.0",
        "jshint": "^2.9.5"
      }
    }
    

      然后是我的gulpfile.js配置

    这里还是用图片吧,动手敲一敲总还是好的,给以后的自己也找点麻烦。
    

      

    内容不多,但是很实用,所以我不会放弃治疗哒。

    转载于:https://www.cnblogs.com/webSong/p/7406630.html

    展开全文
  • 本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下案例要求 案例讲解1、查看未过滤格式化的日期格式2、设置模板函数format 接收日期值和日期格式3、按照日期格式对日期进行拼接并...

    本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下

    案例要求

    8dec93716660cf01e2f3f406ad2eebd7.png

    案例讲解

    1、查看未过滤格式化的日期格式

    2、设置模板函数format 接收日期值和日期格式

    3、按照日期格式对日期进行拼接并返回值

    4、将拼接好的日期显示在页面上

    最终案例效果

    87870bcb8a2d7fb3739400842b9b38fd.png

    代码

    设置日期显示格式

    {{date }}
    {{date | format('yyyy-MM-dd')}}
    {{date | format('yyyy-MM-dd hh:mm:ss')}}
    {{date | format('yyyy-MM-dd hh:mm:ss:S')}}

    // Vue.filter('format', function (value, arg) {

    // // console.log(arg);

    // if (arg == 'yyyy-MM-dd') {

    // var ret = '';

    // ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();

    // return ret;

    // }

    // })

    Vue.filter('format', function (value, arg) {

    function dateFormat(date, format) {

    if (typeof date === "string") {

    var mts = date.match(/(\/Date\((\d +)\)\/)/);

    if (mts && mts.length >= 3) {

    date = parseInt(mts[2]);

    }

    }

    date = new Date(date);

    if (!date || date.toUTCString() == "Invalid Date") {

    return "";

    }

    var map = {

    "M": date.getMonth() + 1, //月份

    "d": date.getDate(), //日

    "h": date.getHours(), //小时

    "m": date.getMinutes(), //分

    "s": date.getSeconds(), //秒

    "q": Math.floor((date.getMonth() + 3) / 3), //季度

    "S": date.getMilliseconds() //毫秒

    };

    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {

    var v = map[t];

    if (v != undefined) {

    if (all.length > 1) {

    v = '0' + v;

    v = v.substr(v.length - 2);

    }

    return v;

    } else if (t === 'y') {

    return (date.getFullYear() + '').substr(4 - all.length);

    }

    return all;

    });

    return format;

    }

    return dateFormat(value, arg);

    })

    var vm = new Vue({

    el: "#app",

    data: {

    date: new Date(),

    },

    });

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持聚米学院。

    展开全文
  • vue 项目 webstrom IDE格式化代码规则遵循eslint设置 首先vue-cli生成了一个项目,开启了eslint的检测, 但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。 解决办法一: 编辑器打开文件 首先,在编辑...

    vue 项目 webstrom IDE格式化代码规则遵循eslint设置
    首先vue-cli生成了一个项目,开启了eslint的检测,

    但是根据webstorm的快捷格式化代码 ctrl+alt+L会造成eslint报错。

    解决办法一:

    编辑器打开文件

    首先,在编辑器里面要启用eslint 插件

    在 .eslintrc.js 上右键,菜单底部有一个 “Apply ESLint Code Style Rule” 点它,之后自动格式化就会按照 eslint 的规则了

    解决办法二:

    webstorm 设置页面->Editor->Code Style
    里面的JavaScript右上有一个set from ,

    我设置成了我想要的Standard风格,

    然后HTML里面Other选项卡里面有个Do not indent children of ,加一个script,然后保存格式化

    在这里插入图片描述

    展开全文
  • { "editor.tabSize": 2, //制表符符号eslint "git.autofetch": true, "editor.fontFamily": "'Courier New', Consolas, monospace", ... "Des": "页面、组件说明", "Author": "姓名", "Date": "Do not edit
    {
      "editor.tabSize": 2, //制表符符号eslint
      "git.autofetch": true,
      "editor.fontFamily": "'Courier New', Consolas, monospace",
      "editor.fontSize": 16,
      // 文件注释
      "fileheader.customMade": {
        "Des": "页面、组件说明",
        "Author": "姓名",
        "Date": "Do not edit",
        "query": "{string} p1  内容ID",
        "props": "{string} p1  数据源",
        "event": "{string} p1  des"
      },
      // 函数注释
      "fileheader.cursorMode": {
        "Des": "函数说明",
        "param": " p1  内容ID",
        "return": "客户列表"
      },
      "fileheader.configObj": {
        "createHeader": true, // 默认打开
        "autoAdd": true // 检测文件没有头部注释,自动添加文件头部注释
      },
      "files.autoGuessEncoding": true,
      // "files.autoSave": "afterDelay", //自动保存
      // "editor.lineNumbers": "on", //打开行号
      "editor.quickSuggestions": {
        //开启自动显示建议
        "other": true,
        "comments": true,
        "strings": true
      },
      "editor.formatOnSave": true, //保存时自动格式化
      // "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
      //autoFixedOnSave 设置已废弃,采用如下新的设置
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.format.enable": true,
      "eslint.validate": [
        "javascript",
        "vue",
        "html"
      ],
      // Use 'prettier-eslint' instead of 'prettier
      "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
      "prettier.semi": false, //去掉代码结尾的分号
      "prettier.singleQuote": true, //让函数(名)和后面的括号之间加个空格
      "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
      "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
      "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-expand-multiline",
        "js-beautify-html": {
          "wrap_attributes": "force-expand-multiline",
          "end_with_newline": false
        }
      },
      "emmet.triggerExpansionOnTab": true,
      "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      },
      "git.enableSmartCommit": true,
      "liveServer.settings.donotShowInfoMsg": true,
      
      "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
      "eslint.options": {},
      "editor.detectIndentation": false,
      "files.autoSave": "afterDelay",
      "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
      "prettier.trailingComma": "all",
      "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
      "git.confirmSync": false,
      "editor.wordWrap": "on",
      "eslint.nodeEnv": "",
      "eslint.codeAction.showDocumentation": {
        "enable": true
      },
      "window.zoomLevel": 0,
      "diffEditor.ignoreTrimWhitespace": false
    }
    
    展开全文
  • vue 时间格式化

    2019-08-13 09:13:39
    前段时间利用vue实现数据在页面上的显示,我本人比较喜欢用谷歌浏览器,但是测试就是不用,用的360 ,说我页面上显示的时候时间存在问题 这个是在360浏览器上显示出来的 看样子时间确实有点问题 我的代码是这样...
  • 最近做的一个项目,后台...// 将后台返回的 /Date(1603892082484)/ 这种时间数据格式化成时分秒 Vue.prototype.$praseDate = function(date){ var dt = new Date(parseInt(date.replace(/.*Date\([^\d]*(\d+)[^\d]*
  • vue中,xml字符串格式化展示在页面

    千次阅读 2019-09-17 22:32:19
    最近需要在vue页面中,展示格式化的xml; 最终格式如图 点击button按钮,弹出弹框,弹框里面的内容,是格式化的xml字符串代码;template里内容如下 <button @click="ac">格式化</button> <el...
  • vue 实现页面静态

    千次阅读 2019-09-05 20:04:15
    使用 this.$router.push(location) 来修改 url,完成页面路由跳转 使用params来隐式传递url的参数,它类似post,url看不出,使用query来传递参数的话,类似get,url一定会被格式化为...
  • 第一:在项目中,新建moment.js,再把http://momentjs.cn/downloads/moment.js的代码放进去; 第二:在.vue文件中,引入插件moment 第三:在.vue文件 第åï¼Âå¨.vueæ件æç­¾éï¼åæåéè½....
  • 使用vue表达式对时间戳格式化

    千次阅读 2018-07-04 19:08:38
    页面html- vue表达式中跟上方法formatTime,页面打开后发现时间戳(毫秒表示)已经转换成功,页面html代码如下 &amp;lt;td class= &quot;time&quot;&amp;gt;{{formatTime(scene.createTime)}}&...
  • .prettierrc代码格式化配置介绍

    千次阅读 2020-06-15 20:18:22
    代码的规范规则很多很繁琐,不可能每个都去手动修改,有时候一个页面能有上百个规范问题,那么这时候代码自动格式化就很有用了,最有名的就是...首先要做的就是在vscode安装prettierrc-代码格式化插件 然后要代码
  • 在实际项目开发中,我们通常获取标准时间后不是直接拿来使用,而是要进行一些操作然后将它显示在页面中,我们将这些操作称作时间格式化。 过滤器 在vue中,我们可以使用过滤器来进行时间格式化。它的写法如下: // ...
  • 使用过滤器格式化日期 案例讲解 查看未过滤格式化的日期格式 设置模板函数format 接收日期值和日期格式 按照日期格式对日期进行拼接并返回值 将拼接好的日期显示在页面上 最终案例效果 代码 设置日期显示格式 &...
  • vue取值页面遍历时,每次都搜索js日期格式化和字符串长度截取,这次记录下来,以后从这里直接拿即可。html代码如下 <div id="cold_news"> <ul class="col-xs-12"> <li class="col-xs-3" v-for=...
  • 最近在做vue+element-ui的后台管理页面,其中用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,在此记录一下解决方案,以免日后再次遇到。前端页面前端代码submitForm...
  • 看到一篇Implementing an Infinite Scroll with Vue.js , 觉得挺... moment.js格式化日期 图片懒加载 结合原生js来写scroll事件 请求节流 创建项目 首先创建一个简单的vue项目 # vue init webpack-simple infinite
  • 在用vscode打开vue项目的时候,...但是我们发现,vue文件html代码无法格式化,这样就比较难受,后来在设置settings.json中添加设置 // 更改vue的html格式 "vetur.format.defaultFormatter.html": "js-beautify-...
  • 然后通过采用自定义时间过滤器对日期进行格式化即可,其代码如“filters:{shijianfilter:function(value,args){...}”。本教程操作环境:windows7系统、vue2.0版,该方法适用于所有品牌电脑。相关文章推荐:在Vue.js...
  • 最近在做vue+element-ui的后台管理页面,其中用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,在此记录一下解决方案,以免日后再次遇到。前端页面前端代码submitForm...
  • Vue刷新修改页面中数据

    千次阅读 2018-04-24 13:13:15
    页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值页面初始化代码:&...
  • 表格中页面后台传值为数字,,前台页面自定义显示为对应文字形式,,,,就要对 表格进行数据操作 如图: 代码: methods: { //状态改成汉字 formatterColumn(row, column) { switch(row.IsAudit){ ...
  • webstorm根据eslint保存的时候格式化代码

    千次阅读 多人点赞 2021-02-02 13:38:51
    用webstrom把vue项目设置eslint规则,然后保存的时候根据eslint规则格式化当前组件的代码 目录: 操作步骤:(参考入口) 1、点击settings->pluings ->搜索eslint-> Install安装​​2、 安装好之后,找到...
  • 但是在Xocde里面,找了半天没找到怎么格式化代码,于是在网上找了个扩展,特此记录。 效果 格式化前: 菜单点击: 格式化后: 下载 MacOS:10.15.3 在页面:https://github.com/nicklockwood/SwiftFormat/rel...
  • 这个Vue搞得挺不错,简单粗暴还有效,上手也不难,记录一下今天的学习,首先描述...JSON数据加载完毕后实例化Vue对象并将数据渲染到HTML页面中 PHP读数据库返回JSON的过程就不细说了,直接来看HTML代码吧 <!DOCTYPE html
  • 最近在做vue+element-ui的后台管理页面,其中用到了datetimepicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,在此记录一下解决方案,以免日后再次遇到。前端页面前端代码submitform...
  • 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式Vue.set(data,’para’,’value’),其中data为Vue创建时传输的data对象名,后面两个参数分别...
  • 做前端页面的时候,貌似日期格式化是没有预置的,需要自己写(当然大部分都是直接C+V了),但是觉得那些方法不容易看懂,而且对于小白来说,用起来也不是那么地方便,于是自己写了一个简单的日期格式化函数。...
  • 页面上展示代码、json数据等,使用highlight.js,可以像编辑器一样对代码格式化、高亮,增加可读性。 官网例子: 简单的使用就是按照文档,引入js/css,按照要求使用即可。 下面介绍在vue中使用 封装成...
  • 第一次用vue,git clone 下来vue代码之后,想在本地pycharm里边写,结果一写就报红,感觉就老是格式错误,其实不是格式错误,只是pycharmm里启用额格式检查工具导致的,如下图,只需要关掉就行了 使用 fetch发送...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 146
精华内容 58
关键字:

vue页面代码格式化

vue 订阅