es--module模块

2023-10-27

一、初识Module

模块：一个一个的局部作用域的代码块

模块系统需要解决的主要问题:

① 模块化的问题

② 消除全局变量

③ 管理加载顺序

Module的基本用法：

import、export：

只要你会用到 import（导入）或 export（导出），在使用 script 标签加载的时候，就要加上 type="module"

示例：

<div class="slider-layout">
        <div class="slider">
            <div class="slider-content">
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
                </div>
            </div>
        </div>
    </div>

<script src="./index.js" type="module"></script>

/* css reset */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}
.slider {
  overflow: hidden;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}

//base.js
// 默认参数
const DEFAULTS = {
    // 初始索引
    initialIndex: 0,
    // 切换时是否有动画
    animation: true,
    // 切换速度，单位 ms
    speed: 300
};
// base
const ELEMENT_NODE = 1;
const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

// 父类
class BaseSlider {
    constructor(el, options) {
        if (el.nodeType !== ELEMENT_NODE)
            throw new Error('实例化的时候，请传入 DOM 元素！');

        // 实际参数
        this.options = {
            ...DEFAULTS,
            ...options
        };

        const slider = el;
        const sliderContent = slider.querySelector('.slider-content');
        const sliderItems = sliderContent.querySelectorAll('.slider-item');

        // 添加到 this 上，为了在方法中使用
        this.slider = slider;
        this.sliderContent = sliderContent;
        this.sliderItems = sliderItems;

        this.minIndex = 0;
        this.maxIndex = sliderItems.length - 1;
        this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

        // 每个 slider-item 的宽度（每次移动的距离）
        this.itemWidth = sliderItems[0].offsetWidth;

        this.init();
    }

    // 获取修正后的索引值
    // 随心所欲，不逾矩
    getCorrectedIndex(index) {
        if (index < this.minIndex) return this.maxIndex;
        if (index > this.maxIndex) return this.minIndex;
        return index;
    }

    // 初始化
    init() {
        // 为每个 slider-item 设置宽度
        this.setItemsWidth();

        // 为 slider-content 设置宽度
        this.setContentWidth();

        // 切换到初始索引 initialIndex
        this.move(this.getDistance());

        // 开启动画
        if (this.options.animation) {
            this.openAnimation();
        }
    }

    // 为每个 slider-item 设置宽度
    setItemsWidth() {
        for (const item of this.sliderItems) {
            item.style.width = `${this.itemWidth}px`;
        }
    }

    // 为 slider-content 设置宽度
    setContentWidth() {
        this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
    }

    // 不带动画的移动
    move(distance) {
        this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
    }

    // 带动画的移动
    moveWithAnimation(distance) {
        this.setAnimationSpeed(this.options.speed);
        this.move(distance);
    }

    // 设置切换动画速度
    setAnimationSpeed(speed) {
        this.sliderContent.style.transitionDuration = `${speed}ms`;
    }

    // 获取要移动的距离
    getDistance(index = this.currIndex) {
        return -this.itemWidth * index;
    }

    // 开启动画
    openAnimation() {
        this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
    }

    // 关闭动画
    closeAnimation() {
        this.setAnimationSpeed(0);
    }

    // 切换到 index 索引对应的幻灯片
    to(index) {
        index = this.getCorrectedIndex(index);
        if (this.currIndex === index) return;

        this.currIndex = index;
        const distance = this.getDistance();

        if (this.options.animation) {
            return this.moveWithAnimation(distance);
        } else {
            return this.move(distance);
        }
    }

    // 切换上一张
    prev() {
        this.to(this.currIndex - 1);
    }

    // 切换下一张
    next() {
        this.to(this.currIndex + 1);
    }

    // 获取当前索引
    getCurrIndex() {
        return this.currIndex;
    }
}
//导出--便于外面文件的访问
export default BaseSlider;

//slider.js
//导入
import BaseSlider from './base.js';

class Slider extends BaseSlider {
    constructor(el, options) {
        super(el, options);
        this._bindEvent();
    }

    _bindEvent() {
        document.addEventListener(
            'keyup',
            ev => {
                if (ev.keyCode === 37) {
                    this.prev();
                } else if (ev.keyCode === 39) {
                    this.next();
                }
            },
            false
        );
    }
}

export default Slider;

//index.js
import Slider from './slider.js';

new Slider(document.querySelector('.slider'));

当你按键盘上的左右按钮进行切换时：

二、 Module的导入导出

1.export default导出和对应的import导入

导出的东西可以被导入（import），并访问到

一个模块没有导出，也可以将其导入

被导入的代码都会执行一遍，也仅会执行一遍

import './module.js';

示例：

<script type="module">


        import './module.js';
</script>

const age = 18;
// const sex = 'male';
console.log(age);

一个模块只能有一个 export default

export default 名;//导出

import 名 from '文件路径';//导入

示例：

<script type="module">
     import age from './module.js'; 
     console.log(age);
</script>

const sex = 'male';


// 一个模块只能有一个 export default
export default sex;

2.export导出和对应的import导入

a.基本用法:

语法：export 声明或语句

export const age = 18;

 <script type="module">
        //切记：不能随意命名
        import {age} from './module.js'; 
        console.log(age);
</script>

//方式1
export const age = 18;

//方式2：
const age = 18;
// export age; ×
export { age }; // √

b.导出、导入多个

       //导入方式1
        // import {fn} from './module.js'; 
        // console.log(fn); 
        // import {className} from './module.js'; 
        // console.log(className);
        // import {age} from './module.js'; 
        // console.log(age);

       //导入方式2
      import { fn, age, className } from './module.js'; 
      console.log(fn, age, className);

function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn, className, age }; //导出方式3

c.导出导入时起别名

<script type="module">

        import { func, age, className as person } from './module.js'; console.log(func, age, person);

</script>

function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn as func, className, age }; //导出方式3

d.整体导入

会导入所有输出，包括通过 export default 导出的

 <script type="module">

        import * as obj from './module.js'; console.log(obj);

</script>

function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn as func, className, age }; //导出方式3

export default 18;

e.同时导入

注意：一定是 export default 的在前


    <script type="module">

        import age2, { func, age, className } from './module.js'; console.log(age2);

    </script>

function fn() {};
//export function fn() {}; //导出方式1
// export function () {} // 匿名函数不行
// export { fn }; //导出方式2

class className {}
// export { className }; //导出方式2

// export class className {}//导出方式1
// export class  {} // 匿名不行

// export const age = 18;//导出方式1
const age = 18;
// export { age };

export { fn as func, className, age }; //导出方式3

export default 18;

三、Module的注意事项和应用

1.注意事项

a.模块顶层的 this 指向

模块中，顶层的 this 指向 undefined

import './module.js';

<script type="module">
        import './module.js';
</script>或
<script src="./module.js" type="module"></script>

console.log(this);
//这里的顶层指的是不在if、for这样的块级作用域中或者不在function这样的函数作用域中，而是在模块最顶层的作用域中

b.import关键字和 import()函数

import关键字命令具有提升效果，会提升到整个模块的头部，率先执行

<script type="module">
        console.log('沙发'); 
        console.log('第二'); 
        import './module.js';
</script>

console.log(this);

注意：

import 执行的时候，代码还没执行
import 和 export 命令只能在模块的顶层，不能在代码块中执行

     //错误

        if (PC) {

        import 'pc.js';

      } else if (Mobile) {

        import 'mobile.js';

      }

import() 可以按条件导入

if (PC) {//将import关键字改为import()函数

        import('pc.js').then().catch();

      } else if (Mobile) {

        import('mobile.js').then().catch();

      }

c.导入导出的复合写法

复合写法导出的，无法在当前模块中使用

<script type="module">

        export { age } from './module.js'; 
        console.log(age);

         // 等价于
        // import { age } from './module.js';
        // export { age } from './module.js';
        // console.log(age);

</script>

export const age = 18;

2.应用

<div class="slider-layout">
        <div class="slider">
            <div class="slider-content">
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/1.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/2.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/3.jpg" alt="1" class="slider-img" /></a>
                </div>
                <div class="slider-item">
                    <a href="javascript:;"><img src="./imgs/4.jpg" alt="1" class="slider-img" /></a>
                </div>
            </div>
        </div>
    </div>

    <script src="./index.js" type="module"></script>

/* css reset */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}
.slider {
  overflow: hidden;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}

//index.js
import Slider from './slider.js';

new Slider(document.querySelector('.slider'));

//slider.js
import BaseSlider from './base.js';
import Keyboard from './keyboard.js';
// import Mouse from './mouse.js';

class Slider extends BaseSlider {
    constructor(el, options) {
        super(el, options);
        this._bindEvent();
    }

    _bindEvent() {
        Keyboard.bindEvent(this);
        // Mouse.bindEvent(this);
    }
}

export default Slider;

//base.js
// 默认参数
import DEFAULTS from './defaults.js';

// 常量
import { ELEMENT_NODE, SLIDER_ANIMATION_CLASSNAME } from './constants.js';

class BaseSlider {
  constructor(el, options) {
    if (el.nodeType !== ELEMENT_NODE)
      throw new Error('实例化的时候，请传入 DOM 元素！');

    // 实际参数
    this.options = {
      ...DEFAULTS,
      ...options
    };

    const slider = el;
    const sliderContent = slider.querySelector('.slider-content');
    const sliderItems = sliderContent.querySelectorAll('.slider-item');

    // 添加到 this 上，为了在方法中使用
    this.slider = slider;
    this.sliderContent = sliderContent;
    this.sliderItems = sliderItems;

    this.minIndex = 0;
    this.maxIndex = sliderItems.length - 1;
    this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

    // 每个 slider-item 的宽度（每次移动的距离）
    this.itemWidth = sliderItems[0].offsetWidth;

    this.init();
  }

  // 获取修正后的索引值
  // 随心所欲，不逾矩
  getCorrectedIndex(index) {
    if (index < this.minIndex) return this.maxIndex;
    if (index > this.maxIndex) return this.minIndex;
    return index;
  }

  // 初始化
  init() {
    // 为每个 slider-item 设置宽度
    this.setItemsWidth();

    // 为 slider-content 设置宽度
    this.setContentWidth();

    // 切换到初始索引 initialIndex
    this.move(this.getDistance());

    // 开启动画
    if (this.options.animation) {
      this.openAnimation();
    }
  }

  // 为每个 slider-item 设置宽度
  setItemsWidth() {
    for (const item of this.sliderItems) {
      item.style.width = `${this.itemWidth}px`;
    }
  }

  // 为 slider-content 设置宽度
  setContentWidth() {
    this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
  }

  // 不带动画的移动
  move(distance) {
    this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
  }

  // 带动画的移动
  moveWithAnimation(distance) {
    this.setAnimationSpeed(this.options.speed);
    this.move(distance);
  }

  // 设置切换动画速度
  setAnimationSpeed(speed) {
    this.sliderContent.style.transitionDuration = `${speed}ms`;
  }

  // 获取要移动的距离
  getDistance(index = this.currIndex) {
    return -this.itemWidth * index;
  }

  // 开启动画
  openAnimation() {
    this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
  }

  // 关闭动画
  closeAnimation() {
    this.setAnimationSpeed(0);
  }

  // 切换到 index 索引对应的幻灯片
  to(index) {
    index = this.getCorrectedIndex(index);
    if (this.currIndex === index) return;

    this.currIndex = index;
    const distance = this.getDistance();

    if (this.options.animation) {
      return this.moveWithAnimation(distance);
    } else {
      return this.move(distance);
    }
  }

  // 切换上一张
  prev() {
    this.to(this.currIndex - 1);
  }

  // 切换下一张
  next() {
    this.to(this.currIndex + 1);
  }

  // 获取当前索引
  getCurrIndex() {
    return this.currIndex;
  }
}

export default BaseSlider;

//defaults.js
// 默认参数
// const DEFAULTS = {
//   // 初始索引
//   initialIndex: 0,
//   // 切换时是否有动画
//   animation: true,
//   // 切换速度，单位 ms
//   speed: 300
// };

// export default DEFAULTS;

export default {
  // 初始索引
  initialIndex: 0,
  // 切换时是否有动画
  animation: true,
  // 切换速度，单位 ms
  speed: 300
};

//keyboard.js
import { LEFT_KEYCODE, RIGHT_KEYCODE } from './constants.js';

const keyboard = {
  bindEvent(slider) {
    document.addEventListener(
      'keyup',
      ev => {
        if (ev.keyCode === LEFT_KEYCODE) {
          slider.prev();
        } else if (ev.keyCode === RIGHT_KEYCODE) {
          slider.next();
        }
      },
      false
    );
  }
};

export default keyboard;

//constants.js
// base
export const ELEMENT_NODE = 1;
export const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

// keyboard
export const LEFT_KEYCODE = 37;
export const RIGHT_KEYCODE = 39;

当单击键盘上的左右箭头时：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ES6

es6es7

es--module模块的相关文章

【ES6】Generator函数

文章目录一声明Generator函数二调用三 next 四 yield 五 return与yield区别一声明Generator函数 Generator函数又称生成器函数是ES6的一个重要的新特性普通函数用functio
3分钟搞懂：JavaScript 和 ECMAScript

JavaScript 和 ECMAScript ECMAScript 是 JavaScript 语言的国际标准 JavaScript 是 ECMAScript 的一种实现 Adobe ActionScript 和 JScript 同样实现了
JavaScript中的promise

概述 promise 承诺是异步编程的一种解决方案可以替代传统的解决方案回调函数和事件 ES6统一了用法并原生提供了Promise对象 promise是异步编程的一种解决方案什么时候我们会来处理异步事件呢一种很常见的场景就应该是
Ant Design Pro从零到一（Mock使用）

认识Mock 学到这里就算是开始踏入AntD的门然后我们还得学习一下常用的一些操作例如Mock 针对与Mock他大致就是用来模拟数据的为什么会有它的出现呢因为现在前后端开发基本是分离的但是数据结构一般都会先定好在日常开发中为了
VUE+vue-print-nb，vue打印我踩过的坑

这几天写了一个需求要求打印条形码先来张要打印出来的效果图吧效果图大概长这样子图是我随便找的二维码扫出来是啥我也不知道哈哈写这个需求的时候踩了太多的坑了在此记录下辛酸史 vue print nb基本用法这个插件用法很简单安
ES6知识点总结——学习网站及环境搭建

1 ES6学习网站 ES6官网 https 262 ecma international org 6 0 阮一峰ES6学习电子书 https es6 ruanyifeng com docs let W3Cschool ES6中文教程 htt
git提交代码报 vue-cli-service lint found some errors. Please fix them and try committing again

原因问过度娘在提交代码的时候它会在提交代码前运行做代码风格检查如果代码不符合相应规则则报错解决直接把pre commit文件删除进入项目 git文件夹 hooks 删除如何你的项目文件夹下没有找到 git文件夹检查一下看看
=> js 中箭头函数使用总结

箭头函数感性认识箭头函数是在es6 中添加的一种规范 x gt x x 相当于 function x return x x 箭头函数相当于匿名函数简化了函数的定义语言的发展都是倾向于简洁对人类友好的减轻工作量的就相当于我最钟
2023最全最新前端面试题（附加解答）

JS 1 说一下innerHTML 与 innerText的作用与区别作用都可以获取或者设置元素的内容区别 innerHTML可以解析内容中的html标签 innerText不能解析内容中的html标签 2 JavaScript 由以
ES6-Map、Set与Arrary的转换

Map与Array的转换这个数组要是二维数组
ES6 新增的循环方法

在 ES6 ECMAScript 2015 中新增了一些循环方法这些方法可以帮助我们更方便地遍历数组字符串 Set Map 等数据结构本文将介绍一些常用的 ES6 循环方法 for of 循环 for of 循环是一种遍历可迭代对象
如何将类数组转换为真正的数组

开发过程中有很多时候获取到的是类似数组的对象比如元素的集合 elementcollection nodeList 以及今天开发时发现classList也是类数组有时我们需要类数组去调用数组的方法怎么办一遍历类数组依次将元素放入
ES6入门：let、const、 var区别及注意事项

ES6入门 let const var区别及注意事项一 let const 1 用来声明变量或声明常量 2 let 代替 var 声明变量 const 声明常量为了那些一旦初始化就不希望重新赋值的情况设计的 3 var let声明的就是
ES6入门

一 let和const命令 1 let命令类似于var 但是只在let所在的代码块有效不存在变量提升即一定要先声明后使用暂时性死区待理解不允许重复声明 2 块级作用域内层不影响外层 3 const命令 const声明一个常量
ES6迭代器、Set、Map集合和async异步函数

目录迭代器 Iterator 的作用 Iterator 的遍历过程 Set Map集合 map和对象区别 async异步函数迭代器迭代器 Iterator 就是这样一种机制它是一种接口为各种不同的数据结构提供统一的访问机制任何数
Object.entries()方法使用详解

一概述对象的数据处理方法我们熟知的有很多比如Object keys Object values for in等本文将其与其它常见使用方法进行对比详细解析其特性二对比 for in Object entries 方法的优势 1
ES6 Promise详解

优质资源分享学习路线指引点击解锁知识定位人群定位 Python实战微信订餐小程序进阶级本课程是python flask 微信小程序的完美结合从项目搭建到腾讯云部署上线打造一个全栈订餐系统 Python量化交易实战入门级手
3分钟玩转：ES6 模块化

ES6 模块 ES6 使用 export 和 import 导出和导入模块导出模块一个模块就是一个独立的 JS 文件该文件内的变量外部无法获取若希望能让外部获取模块内的变量则要用 export 关键字暴露变量分别暴露命名行内导
137-----JS基础-----类的操作

一代码不算难如果后续操作到类的话可以直接使用下面封装好的接口到自己的tool中
ES6阮一峰入门教程

地址为 https es6 ruanyifeng com

随机推荐

Centos中ifcfg-ens33文件参数解释

DEVICE 接口名设备网卡 USERCTL yes no 非root用户是否可以控制该设备 BOOTPROTO IP的配置方法 none static bootp dhcp 引导时不使用协议静态分配IP BOOTP协议 DHCP协议
java JSONObject转换为String格式

在使用微信支付时需将从前台接收的JSONObeject 格式数据转换为String类型其具体的转换过程如下 JSONObject jsonObject JSONObject parseObject XmltoJsonUtil xml2J
NS元胞自动机模型--python实现

实现 coding utf 8 NS模型场景周期型边界道路长度 cell 1000个元胞车辆初始分布为均匀分布初始速度 v0 vmax 5 随机慢化概率 p 0 1 仿真时步为2000时步从500时步开始采样 1表示元胞其他值
echarts仪表盘颜色渐变

echarts仪表盘背景颜色渐变 echarts仪表盘背景颜色渐变 offset设置偏移量代码 option tooltip formatter a br b c toolbox feature restore saveAsImage s
ASP.NET MVC Controller与Areas下面的Controller同名的解决办法

问题重现当项目下 Controller HomeController cs时人在创建一个域Test 之后在建一个同名的HomeController Areas Test Controller HomeController cs 运行报错
软件测试面试题1

1 问软件测试的原则答软件测试的八个原则山鬼谣弋痕夕的博客 CSDN博客软件测试的八个原则所有测试的标准都是建立在用户需求之上始终保持质量第一的觉悟当时间和质量冲突时时间要服从质量需求阶段应定义清楚产品的质量标准软
Homebrew命令

安装软件 brew install appname 卸载软件 brew uninstall appname brew remove appname 查看以安装软件 brew list 查看软件相关信息 brew info appname 查
数据挖掘——基于sklearn包的分类算法小结

目录一分类算法简介二 KNN算法三贝叶斯分类算法四决策树算法五随机森林算法六 SVM算法一分类算法简介 1 概念 1 1 监督学习 Supervised Learning 从给定标注训练集有给出明确的因变量Y 的训
一次「找回」TraceId的问题分析与过程思考

用好中间件是每一个开发人员的基本功一个专业的开发人员追求的不仅是中间件的日常使用还要探究这背后的设计初衷和底层逻辑进而保证我们的系统运行更加稳定让开发工作更加高效结合这一主题本文从一次线上告警问题出发通过第一时间定位问题的根
信息学奥赛一本通 1179：奖学金

题目链接 http ybt ssoier cn 8088 problem show php pid 1179 include
mysql存储区块链_区块链数据是存在链上还是数据库里？

在回答这个问题之前首先要理清区块链数据和链上数据的概念区块链数据区块链数据广义上包括区块链的区块数据和区块链的状态数据区块数据记录了区块链上发生的每一笔交易譬如小明给小王转账了50元小王充值了20元等类似这样的交易数据
A+B PLUS

大整数加法思路把每一位存在数组里相加遇10进1 include
基本原理图的制作

以一个案例演示完成以下要求 1 采用网络标号进行元件间的连线 2 单独修改元件的封装标称值等参数 3 采用自动编号的方法对原理图中所有元件进行整体编号 4 修改原理图中相同元器件的封装值 5 完成附图所示原理图的制作步骤 1 创建文件
『学Vue2+Vue3』Vuex 是什么？vuex 的使用

一 Vuex 概述目标明确Vuex是什么应用场景以及优势 1 是什么 Vuex 是一个 Vue 的状态管理工具状态就是数据大白话 Vuex 是一个插件可以帮我们管理 Vue 通用的数据多组件共享的数据例如购物车数据个人
cmake安装与使用

目录 1 下载与安装 2 Cmake使用 2 1 在window 开始中点击cmake gui exe 打开cmake程序面板 2 2打开需要编译的cmake代码工程环境 Windows10 64bit 1 下载与安装下载地址 htt
Web应用程序项目以配置使用IIS。未找到Web服务器

针对这个问题本人也从网上找了一下解决办法但是不是太全面接下来我会总结一下我所用到过的方法 1 在文件夹下面编辑该Web项目的csproj文件把UserIIS改为False 2 可以在IIS服务器里面配置一个IISUrl里面的地址地
find、grep--根据内容找文件

1 可以找到相关的文件名或目录名所在的位置 find name file or dir name linux下的find文件查找命令与grep文件内容查找命令云社区华为云 2 找出文本文件的位置并找出内容包含关键字的文件 find
解决vue安装less-loader依赖失败的问题

vue可视化面板中提供的less loader依赖安装失败倒是以下代码识别不了出现错误信息还有一种情况就是在vue cli视图中安装的less loade版本过高 10 1 0 在我们运行项目时虽然已经安装了但是版本过高出现了不
typescript环境安装及IDEA配置typescript

一 typescript环境安装 1 安装node npm 下载官网安装包 http nodejs cn download 双击运行 2 安装完node npm后查看是否安装成功 node v npm v 3 安装typescript n
es--module模块

一初识Module 模块一个一个的局部作用域的代码块模块系统需要解决的主要问题模块化的问题消除全局变量管理加载顺序 Module的基本用法 import export 只要你会用到 import 导入或 export 导出在