vue学习的零散记录

最新推荐文章于 2024-05-31 10:04:55 发布

休174

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量337

点赞数 6

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_72974213/article/details/134118635

版权

1.文件

调用fs,修改不同环境下的ping值

const path = require('path')
const fs = require('fs')

const ping = proccess.env.VUE_APP_META_PING
fs.writeFileSync(path.resolve(__dirname,'public/ping.html'),
    `JSON.stringfy(ping)`
)

2..browserslistrc文件

> 1%
last 2 versions
not dead

文件解析
package.json 文件里的 browserslist 字段 (或单独的 .browserslistrc 文件)，指定项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的额外的 CSS 浏览器前缀，用于保证代码的兼容性

> 1%：使用者数量的百分比

last 2 versions：支持最新两个版本的兼容性代码添加

not dead：是指24个月内没有更新与维护的浏览器

3.process.env

process.env 是node.js的一个环境对象。

而这些命令，都有自己的默认模式：
npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV

4.修改标题

index.html中的标题

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
        <strong>We're soryy but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue</strong>
    </noscript>
    <div id="app"></div>
    <!-- <script type="module" src="/src/main.js"></script> -->
  </body>
</html>

vue.config.js中配置


  chainWebpack: config => {
    config
    .plugin('html')
    .tap(args => {
        args[0].title = '你的标题名字'
        return args

}
 devServer: {
    ...
}

5.使用deep

<style >
    :deep(.className){
        color:white;
    }
</style>

6.eslint错误提示

trailling spaces not allowed 尾随空格，删了就行

Unexpected space before function parentheses 函数括号前的意外空格 eslint配置的rule里面改一下"space-before-function-paren": 0

7.时间戳换算

有的时间戳小宇11位，根据是否是毫秒判定不同的算法

function timestamp(){
    setInterval("$('#now_timestamp').val(Math.round(new Date().getTime()/1000));",1000);
    function timestamptostr(timestampStr) {
		var  timestamp = parseInt(timestampStr);
		if(timestampStr.length<11){
			timestamp = parseInt(timestampStr) * 1000;
		}
         d = new Date(timestamp);
         var jstimestamp = (d.getFullYear())+"-"+(d.getMonth()+1)+"-"+(d.getDate())+" "+(d.getHours())+":"+(d.getMinutes())+":"+(d.getSeconds());
         return jstimestamp;
    }
    $('#unixtime').val(Math.round(new Date().getTime()/1000));

    $('#toGMT').click(function(){
        $('#result_GMT').val(timestamptostr($('#unixtime').val()));
    })
    
    var now_strTime = timestamptostr(Math.round(new Date().getTime()/1000));
    var arr = new Array();
    arr = now_strTime.split(' ');
    YMD = arr[0].split('-');
    HIS = arr[1].split(':');
    $('#year').val(YMD[0]);
    $('#month').val(YMD[1]);
    $('#day').val(YMD[2]);
    $('#hour').val(HIS[0]);
    $('#minute').val(HIS[1]);
    $('#second').val(HIS[2]);

    $('#toUNIX').click(function(){
        var utime = new Date(Date.UTC($('#year').val(), $('#month').val() - 1, $('#day').val(), $('#hour').val()-8, $('#minute').val(), $('#second').val()));
        $('#result_unix').val(utime.getTime()/1000);
    })
}

$(function(){
    timestamp();
})

休174

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue学习的零散记录

package.json 文件里的 browserslist 字段 (或单独的 .browserslistrc 文件)，指定项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的额外的 CSS 浏览器前缀，用于保证代码的兼容性。可以在 .env.development 文件下修改该模式的 NODE_ENV。可以在 .env.production 文件下修改该模式的 NODE_ENV。
复制链接

扫一扫