vue项目中在单独的js文件中使用element ui

vue项目中在单独的js文件中使用element ui 例如要使用MessageBox组件例如要使用MessageBox组件 1.引入组件 import { MessageBox } from "element-ui"; 2.使用 MessageBox.confirm("这是一个内容", "这是一个标题" ,{undefined distinguishCancelAndClose: true, confirmButtonText: ‘确认’, showClose:false, showCancelButton:false }).then(()=>{undefined // 点击确认按钮的回调 }）一般是在响应拦截器中使用，亲测有效 ———————————————— 版权声明：本文为CSDN博主「流年＊痕迹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_52007839/article/details/111663753

Vue解决报错8_打包时TyeError: Class extends value undefined is not a constructor or null

一、问题描述执行 npm run build:prod

ERROR TypeError: Class extends value undefined is not a constructor or null

TypeError: Class extends value undefined is not a constructor or null

at Object.<anonymous> (C:\Users\司超龙\IdeaProjects\vue\base_education_vue\base_education_third_3.0+\grass-roots teaching system\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46)

at Module._compile (internal/modules/cjs/loader.js:1063:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

at Module.load (internal/modules/cjs/loader.js:928:32)

at Function.Module._load (internal/modules/cjs/loader.js:769:14)

at Module.require (internal/modules/cjs/loader.js:952:19)

at require (internal/modules/cjs/helpers.js:88:18)

at Object.<anonymous> (C:\Users\司超龙\IdeaProjects\vue\base_education_vue\base_education_third_3.0+\grass-roots teaching system\node_modules\mini-css-extract-plugin\dist\index.js:12:45)

at Module._compile (internal/modules/cjs/loader.js:1063:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! vue-admin-template@4.4.0 build:prod: `vue-cli-service build`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the vue-admin-template@4.4.0 build:prod script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\司超龙\AppData\Roaming\npm-cache\_logs\2021-03-26T13_04_34_482Z-debug.log

执行num run build:prod 报错，但是npm run dev没问题二、解决 TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous> (C:\Users\司超龙\IdeaProjects\vue\base_education_vue\base_education_third_3.0+\grass-roots teaching system\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46) CssDependency的问题，依赖包不兼容执行npm add webpack@4.5.0，解决 from:https://blog.csdn.net/qq_24654501/article/details/115254960

带你了解Typescript的14个基础语法

本文分享自华为云社区《Typescript基础语法全解析》，作者：北极光之夜。。一.Ts是什么：首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集，在JS的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。二. 基本语法： 1.声明原始数据类型：在变量后面指定一个关键字表示其只能为什么类型。 string类型：

1	const a: string = 'auroras'

number类型：

1	const b: number = 666 // 包括 NAN Infinity

boolean类型：

1	const c: boolean = true

null类型：

1	const d: null = null

undefined类型：

1	const e: undefined = undefined

symbol类型：

1	const h: symbol = Symbol()

2.声明Object类型：首先，object类型不单单可以指定对象，还可以指定数组或函数：

const foo1: object = {};

const foo2: object = [];

const foo3: object = function(){};

如果只想指定为对象，如下，对象属性都要提前声明好类型：

const obj: {name: string,age: number} = {

name: '北极光',

age:18

}

3.1声明数组类型：可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：

1	const arr: Array<number> = [1,2,3]

第二种方式如下，也指定声明元素都为数字的数组：

1	const arr: number[] = [1,2,3]

3.2声明元组类型：就是要提前指定数组里每个元素的类型，严格一一对应：

1	const tuple: [number,string,boolean] = [666,'auraros',true]

4.声明枚举类型：通过关键字enum声明一个枚举类型，如：

enum Status {

pedding = 1,

resolve = 2,

reject = '3'

}

//访问

console.log(Status.pedding);

如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。 5.函数参数与返回类型：函数声明式：指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同：括号里指定每个参数类型，括号右边指定返回值的类型。

function fun (name:string,age:number):string{

return 'sss'

}

fun('auroras',18);

如果传入参数不确定传不传，那么可以给参数加个‘？’表明它是可选的：

function fun (name:string,age?:number):string{

return 'sss'

}

fun('auroras');

或者给参数添加默认值，那也会成为可选参数：

function fun (name:string,age:number=666):string{

return 'sss'

}

fun('auroras');

如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：

function fun (name:string,age:number=666,...res:number[]):string{

return 'sss'

}

fun('auroras',1,2,3);

函数表达式：

const fun2:(name:string,age:number)=>string = function(name:string,age:number){

return 'sss'

}

定义接口时再详细说。 6.任意类型：通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：

let num:any = 1;

num = 'a';

num = true;

7.类型断言：类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。可以通过 as+类型断言它就是某种类型的：

1 2	const res = 1; const num = res as number;

也可以通过 <类型> 形式断言（不推荐）：

1 2	const res = 1; const num = <number>res

8.接口基本使用：接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。 […]

最全的 Vue 面试题+详解答案

前言本文整理了高频出现的 Vue 相关面试题并且附带详解答案难度分为简单中等困难三种类型大家可以先不看答案自测一下自己的 Vue 水平哈如果对原理感兴趣的同学欢迎查看小编的手写 Vue 源码系列文章如果对答案有不一样见解的同学欢迎评论区补充讨论最后欢迎大家点击链接加入到鲨鱼哥的前端群内推讨论技术摸鱼求助皆可(进群免费领取 Vue2 源码思维导图哈) 整理不易如果觉得本文有帮助记得点赞三连哦十分感谢！简单 1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范 Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据 MVC 的思想：一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来，换句话说就是在 Controller 里面把 Model 的数据赋值给 View。 MVVM MVVM 新增了 VM 类 ViewModel 层：做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。 MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM […]

最全的手写JS面试题

前言本文整理了前端面试高频出现的手写源码相关的题目其中有小编面试亲自遇到的也有其他同学帮忙补充的整体采用 es6 语法并且以简单易懂版进行实现如果对答案有不一样见解的同学欢迎评论区补充讨论虽然鲨鱼哥也很不喜欢内卷但是在如今人人皆卷的大环境下大家只有比别人更卷才能收获更好的未来最后欢迎大家点击链接加入到鲨鱼哥的前端群内推讨论技术摸鱼求助皆可~~ 整理不易如果觉得本文有帮助记得点赞三连哦十分感谢！ 1 compose 题目描述:实现一个 compose 函数

// 用法如下:

function fn1(x) {

return x + 1;

}

function fn2(x) {

return x + 2;

}

function fn3(x) {

return x + 3;

}

function fn4(x) {

return x + 4;

}

const a = compose(fn1, fn2, fn3, fn4);

console.log(a(1)); // 1+4+3+2+1=11

复制代码

实现代码如下:

function compose(...fn) {

if (!fn.length) return (v) => v;

if (fn.length === 1) return fn[0];

return fn.reduce(

(pre, cur) =>

(...args) =>

pre(cur(...args))

);

}

复制代码

2 settimeout 模拟实现 setinterval(带清除定时器的版本) 题目描述:setinterval 用来实现循环定时调用可能会存在一定的问题能用 settimeout 解决吗实现代码如下:

function mySettimeout(fn, t) {

let timer = null;

function interval() {

fn();

timer = setTimeout(interval, t);

}

interval();

return {

cancel:()=>{

clearTimeout(timer)

}

// let a=mySettimeout(()=>{

// console.log(111);

// },1000)

// let b=mySettimeout(() => {

// console.log(222)

// }, 1000)

复制代码

扩展：我们能反过来使用 setinterval 模拟实现 settimeout 吗？

const mySetTimeout = (fn, time) => {

const timer = setInterval(() => {

clearInterval(timer);

fn();

}, time);

};

// mySetTimeout(()=>{

// console.log(1);

// },1000)

复制代码

扩展思考：为什么要用 settimeout 模拟实现 setinterval？setinterval 的缺陷是什么？答案请自行百度哈这个其实面试官问的也挺多的小编这里就不展开了 3 发布订阅模式题目描述:实现一个发布订阅模式拥有 on emit once off 方法实现代码如下:

class EventEmitter {

constructor() {

this.events = {};

}

// 实现订阅

on(type, callBack) {

if (!this.events[type]) {

this.events[type] = [callBack];

} else {

this.events[type].push(callBack);

}

// 删除订阅

off(type, callBack) {

if (!this.events[type]) return;

this.events[type] = this.events[type].filter((item) => {

return item !== callBack;

});

}

// 只执行一次订阅事件

once(type, callBack) {

function fn() {

callBack();

this.off(type, fn);

}

this.on(type, fn);

}

// 触发事件

emit(type, ...rest) {

this.events[type] &&

this.events[type].forEach((fn) => fn.apply(this, rest));

}

// 使用如下

// const event = new EventEmitter();

// const handle = (...rest) => {

// console.log(rest);

// };

// event.on("click", handle);

// event.emit("click", 1, 2, 3, 4);

// event.off("click", handle);

// event.emit("click", 1, 2);

// event.once("dbClick", () => {

// console.log(123456);

// });

// event.emit("dbClick");

复制代码

4 数组去重实现代码如下:

function uniqueArr(arr) {

return [...new Set(arr)];

}

复制代码

5 数组扁平化题目描述:实现一个方法使多维数组变成一维数组最常见的递归版本如下：

function flatter(arr) {

if (!arr.length) return;

return arr.reduce(

(pre, cur) =>

Array.isArray(cur) ? [...pre, ...flatter(cur)] : [...pre, cur],

[]

);

}

// console.log(flatter([1, 2, [1, [2, 3, [4, 5, [6]]]]]));

复制代码

扩展思考：能用迭代的思路去实现吗? 实现代码如下:

function flatter(arr) {

if (!arr.length) return;

while (arr.some((item) => Array.isArray(item))) {

arr = [].concat(...arr);

}

return arr;

}

// console.log(flatter([1, 2, [1, [2, 3, [4, 5, [6]]]]]));

复制代码

6 寄生组合继承题目描述:实现一个你认为不错的 js 继承方式实现代码如下:

function Parent(name) {

this.name = name;

this.say = () => {

console.log(111);

};

}

Parent.prototype.play = () => {

console.log(222);

};

function Children(name) {

Parent.call(this);

this.name = name;

}

Children.prototype = Object.create(Parent.prototype);

Children.prototype.constructor = Children;

// let child = new Children("111");

// // console.log(child.name);

// // child.say();

// // child.play();

复制代码

7 实现有并行限制的 Promise […]

最全的TypeScript学习指南

前言 Hello 大家好我是鲨鱼哥这次给大家带来的是我曾经非常嫌弃如今却爱不释手的 TS 技术哈哈大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的然后因为 Vue2 和 TS 的结合总感觉不是很丝滑所以我果断就在技术选型的时候去掉了 TS（其实我是觉得用起来很烦和我之前最讨厌的 eslint 一样各种报错让人不爽）但是鲨鱼哥今年换了新公司开启了全新的 react hook+ts 这一套组合拳然后在重新认真学习并在项目里用上了 ts 之后确实真香哈哈最直观的感受就是可以帮我们规避很多类型错误更友好的提示甚至有些方法我们根据定义的类型大概就知道作用是什么了（去掉了写注释的麻烦）况且如今大火的 Vue3 也是 TS 重构的然后 react 和 ts 的结合就更不必说了所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧最后欢迎大家点击链接加入到鲨鱼哥的前端群内推讨论技术摸鱼求助皆可整理不易如果觉得本文有帮助记得点赞三连哦十分感谢！ 1 ts 安装和编译第一步新建一个空文件夹用来学习 ts 第二步全局安装 ts 和 ts-node

1 2	cnpm i typescript -g //全局安装ts cnpm i -g ts-node //全局安装ts-node

第三步生成 tsconfig.js 配置文件

1	tsc --init

我们就先按照自动生成的 tsconfig 配置项去使用里面的配置咱们可以先不去管他后续熟练了再去配置第四步在项目下新建一个index.ts 直接写入

1 2	const a: string = "hello"; console.log(a);

[…]

TypeScript+Vue实例完全教程

功能轮播搜索列表懒加载简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址：https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子基于类的写法加上静态类型检查，简直不能再嗨

import Vue from "vue";

import Component from "vue-class-component";

import { State } from "vuex-class";

@Component

export default class Shops extends Vue {

@State shops: StoreState.shop[];

@State searchVal: string;

get shopList(): StoreState.shop[] {

const shops = this.shops;

const searchVal = this.searchVal;

return shops.filter(

(el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1

);

}

</script>

为什么使用TypeScript JavaScript的超集支持所有原生JavaScript的语法强类型语言现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后，直接就可以看到函数的返回值结构，将会非常的方便强大的IDE支持现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持，主要体现在智能提示上，非常的方便可运行于任何浏览器、计算机、操作系统强大的编译引擎迭代更新快不断更新，提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言，而Google的Angular使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的 TypeScript配置本项目已经配置完毕，这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader，这是TypeScript为Webpack提供的编译器，类似于babel-loader

1	npm i ts-loader -D

接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x)：

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

{

test: /\.tsx?$/,

exclude: /node_modules/,

use: [

"babel-loader",

{

loader: "ts-loader",

options: { appendTsxSuffixTo: [/\.vue$/] }

}

]

}

2. tsconfig.json 创建tsconfig.json文件，放在根目录下，和package.json同级配置内容主要也看个人需求，具体可以去typescript的官网查看，但是有一点需要注意：在Vue中，你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。这里列出我的配置，功能在注释中给出

{

"include": [

"src/*",

"src/**/*"

"exclude": [

"node_modules"

"compilerOptions": {

// types option has been previously configured

"types": [

// add node as an option

"node"

// typeRoots option has been previously configured

"typeRoots": [

// add path to @types

"node_modules/@types"

// 以严格模式解析

"strict": true,

// 在.tsx文件里支持JSX

"jsx": "preserve",

// 使用的JSX工厂函数

"jsxFactory": "h",

// 允许从没有设置默认导出的模块中默认导入

"allowSyntheticDefaultImports": true,

// 启用装饰器

"experimentalDecorators": true,

"strictFunctionTypes": false,

// 允许编译javascript文件

"allowJs": true,

// 采用的模块系统

"module": "esnext",

// 编译输出目标 ES 版本

"target": "es5",

// 如何处理模块

"moduleResolution": "node",

// 在表达式和声明上有隐含的any类型时报错

"noImplicitAny": true,

"lib": [

"dom",

"es5",

"es6",

"es7",

"es2015.promise"

"sourceMap": true,

"pretty": true

}

3. 修改main.js 把项目主文件main.js修改成main.ts，里面的写法基本不变，但是有一点需要注意：引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件，所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件，建议放在src目录下再创建一个typings文件夹，把这个声明文件放进去，如：src/typings/vue-shims.d.ts，文件内容： *.d.ts类型文件不需要手动引入，TypeScript会自动加载

declare module '*.vue' {

import Vue from 'vue'

export default Vue

}

到这里TypeScript在Vue中配置就完成了，可以愉快的撸代码了~ 第三方插件库现在Vue官方已经明确提出支持TypeScript，并考虑出一个对应的vue-cli，在这之前，Vue开发团队已经开发出了一些插件库来支持TypeScript，这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过 ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~

import Vue from "vue";

import Component from "vue-class-component";

@Component

export default class App extends Vue {

name:string = 'Simon Zhang'

// computed

get MyName():string {

return `My name is ${this.name}`

}

// methods

sayHello():void {

alert(`Hello ${this.name}`)

}

mounted() {

this.sayHello();

}

[…]

解决 Nginx 部署 Vue 项目路由出现 404 的问题

代码如下:

server {

listen 80;

server_name example.com;

location / {

root /home/example/dist;

try_files $uri $uri/ @router; # 配置使用路由

index index.html index.htm;

}

# 路由配置信息

location @router {

rewrite ^.*$ /index.html last;

}

from:https://blog.csdn.net/peng2hui1314/article/details/106690852

ERROR in xxx.js from UglifyJs

ERROR in xxx.js from UglifyJs 问题 ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» [app.bundle.js:106,8] 在用webpack对代码打包的时候报错，在网上找到了类似的答案，还是没有解决我的问题. 能解决大部分问题的链接 https://stackoverflow.com/questions/41254538/error-in-bundle-js-from-uglifyjs http://www.cnblogs.com/aredleave/p/7586911.html https://segmentfault.com/a/1190000011212544 按照以上方法对环境进行重新配置，依然报错！

ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core').

If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

报错原因通过代码报错原因是 babel-loader 版本问题，因为 babel-loader 用的最新的版本，和 UglifyJs 不兼容. 解决方法通过运行下面代码对babel-loader进行重新安装（低版本）. npm install --save-dev babel-loader@7 通过修改后的package.json配置文件，亲测可以正确打包，无报错现象.

{

"name": "kankan",

"version": "1.0.0",

"description": "kankan",

"main": "webpack.config.js",

"scripts": {

"start": "webpack-dev-server --open --config webpack.dev.js",

"build": "webpack --config webpack.prod.js"

"author": "kankan",

"license": "ISC",

"devDependencies": {

"babel": "^6.23.0",

"babel-core": "^6.26.3",

"babel-loader": "^7.1.5",

"babel-preset-es2015": "^6.24.1",

"clean-webpack-plugin": "^2.0.1",

"css-loader": "^2.1.1",

"express": "^4.16.4",

"html-webpack-plugin": "^3.2.0",

"style-loader": "^0.23.1",

"uglifyjs-webpack-plugin": "^2.1.2",

"webpack": "^4.30.0",

"webpack-cli": "^3.3.1",

"webpack-dev-middleware": "^3.6.2",

"webpack-dev-server": "^3.3.1",

"webpack-manifest-plugin": "^2.0.4",

"webpack-merge": "^4.2.1"

}

奇卡奇卡哈哈哈个人主页：https://kankan.fun from:https://blog.csdn.net/qq_38025939/article/details/89576282

vue报错：Module build failed: TypeError: this.getOptions is not a function

vue-cli构建项目使用sass报错 Module build failed: TypeError: this.getOptions is not a function 出现问题的原因是安装的sass-loader版本过高,选择安装较低版本的sass-loader即可。

1	npm install sass-loader@7.3.1 --save-dev

Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0. 出现问题的原因是安装的sass版本过高,选择安装4.0+版本的sass即可。

1	npm install node-sass@4.14.1 --save-dev

from:https://www.cnblogs.com/chenjy1225/p/14930870.html

vue vue-style-loader !css-loader错误

最近在学习vue框架，使用webpack打包vue项目，在执行npm run start的时候出现如下错误： This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu 解决思路： npm install sass-loader --save; npm install node-sass --save; 然后运行npm run start就可以 from:https://www.cnblogs.com/hexiaobao/p/8260858.html

18 个杀手级 JavaScript 单行代码

1、复制到剪贴板使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。

1 2	const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World");

2、检查日期是否有效使用以下代码段检查给定日期是否有效。

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");

// Result: true

3、找出一年中的哪一天查找给定日期的哪一天。

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());

// Result: 272

4、将首字符串大写 Javascript 没有内置的大写函数，因此我们可以使用以下代码。

1	const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)capitalize("follow for more")// Result: Follow for more

5、找出两日期之间的天数使用以下代码段查找给定 2 个日期之间的天数。

1	const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)dayDif(new Date("2020-10-21"), new Date("2021-10-22"))// Result: 366

6、清除所有 Cookie 你可以通过使用 document.cookie 访问 cookie 并清除它来轻松清除存储在网页中的所有 cookie。

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '')

.replace(/=.*/, `=;expires=${new Date(0).toUTCString()};

path=/`));

7、生成随机十六进制你可以使用 Math.random 和 padEnd 属性生成随机十六进制颜色。

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`

console.log(randomHex());

//Result: #92b008

8、从数组中删除重复项你可以使用 JavaScript 中的 Set 轻松删除重复项。

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));

// Result: [ 1, 2, 3, 4, 5, 6 ]

9、从 URL 获取查询参数你可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 从 url 轻松检索查询参数

const getParameters = (URL) => {

URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace(

/=/g, '":"') + '"}');

return JSON.stringify(URL);

};

getParameters(window.location) // Result: { search : "easy", page : 3 }

10、从日期记录时间我们可以从给定日期以小时::分钟::秒的格式记录时间。

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));

// Result: "17:30:00"

11、检查数字是偶数还是奇数

1 2	const isEven = num => num % 2 === 0;console.log(isEven(2)); // Result: True

12、求数字的平均值使用 reduce 方法找到多个数字之间的平均值。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4);

// Result: 2.5

13、反转字符串你可以使用 split、reverse 和 join 方法轻松反转字符串。

1 2	const reverse = str => str.split('').reverse().join('');reverse('hello world'); // Result: 'dlrow olleh'

14、检查数组是否为空检查数组是否为空的简单单行程序将返回 true […]

JAVASCRIPT