Vue铺垫知识 --- ES6模块化
Vue框架
内容管理
- Vue
- Vue前置内容
- ES6模块化
- 默认导出【暴露】和默认导入
- 按需导入和按需导出
- 直接导入并执行模块中的代码
- 安装node，vue
- 安装vue
- 创建vue项目
- vue create
- vue init webpack
- promise 解决回调地狱
- 回调函数的实例 -- 顺序读取文件
- 使用fs模块 -- 回调函数读取文件
- 使用then-fs读取文件内容【promise】
- 通过.catch捕获错误，.finally进行强制执行
- Promise的静态方法 --- Promise.all()
- Promise的静态方法 --- Promise.race()
- 基于Promise封装读文件的方法
- async/await简化promise
- EventLoop
- 同步任务【JavaScript主线程执行】
- 异步任务 【宿主环境执行】
- 宏任务与微任务
- 宏任务 macrostack
- 微任务microstack
- API接口实例
- 创建服务器 app.js
- 创建db数据库操作模块
- 创建user_ctrl模块
- 创建user_router模块
- 使用try--catch捕获异常
Vue基础
Vue框架是当前前端最火的框架，这里为了后期配合springBoot框架完成一个完整项目的搭建
Vue
Vue是一套构建用户界面的渐进式JavaScript框架【渐进式： 可以自底向上逐层应用，简单的应用就只需要小巧的核心库，复杂的可以引入各式各样的Vue插件】
Vue的优点 ：
- 采用组件化的模式，提高代码的复用率，让代码更好维护，比如一个图片的切换的部分就可以将其变成一个vue的文件
- 声明式编码，让编码人员无需注解操作DOM，提高开发的效率
//命令式编码
let htmlStr = '';
persons.forEach(p => {htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`;
});
//获取list元素
let list = document.getElementById('list');
//修改内容,手动操作DOM
list.innerHTML = htmlstr;
对应的，如果使用声明式编码
<ul id = 'list'><li v-for="p in persons">{{p.id} - {p.name} - {p.age}}</li>
</ul>
- 虚拟DOM，采用Diff算法进行优化，提高复用 ---- 如果原来的数据生成一个列表，现在的列表多了一些数据，那么vue就采用的虚拟DOM，数据先转化为虚拟的DOM，再转化为真实的DOM
Vue前置内容
ES6模块化
模块化就是将js文件分解为各个功能不同的js文件，每一个js文件就是一个独立的模块，每一个模块就对应界面上的一个部分，但是模块化管理，很多的数据要进行共享，就需要遵守一个规范，现在的标准的规范就是ES6
在node.js中遵循的是CommonJS的模块化规范，其中：
导入其他模块中使用require()方法
模块对外共享成员使用module.exports对象
模块化的好处就是模块化和规范化，降低沟通的成本，方便各模块的相互调用； 比如像导航栏就可以单独弄成一个小的模块，这样就可以复用
在ES6模块化规范之前，还有其他的各种各样的模块，AMD和CMD等，但是这些小的规范都是局限的，而ES6模块化的出现就解决了杂乱，直接统一进行管理。
ES6模块化规范是浏览器端和服务器端 的通用的模块化开发规范。在其中定义了：
- 每一个js文件都是一个独立的模块
- 导入其他的模块的成员使用
import关键字 - 向外共享模块成员使用
export关键字
ES6模块化主要包含3中用法：
- 默认导出与默认导入
- 按需导出与按需导入
- 直接导入并执行模块中的代码
在项目中打开package.json，加入type：module
{"type": "module","name": "vue01","version": "1.0.0","description": "first project","author": "Cfeng","private": true,"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","build": "node build/build.js"},"dependencies": {"vue": "^2.5.2","vue-router": "^3.0.1"},
导入和导出操作的都是JSON对象，导入导出可以是默认的也就是找不到固定的export的JSON，就会直接导入默认的，所以导入的时候可以是任何的名称
默认导出【暴露】和默认导入
默认导出就是将js中的成员导出供其他的js文件的使用
export default 默认导出的成员 //默认导出的成员各种都可以，将他们放到{}中
要注意每一个模块只能允许使用唯一的一次的默认导出export default，否则就会报错
这里可以简单示范一下
//这里just作为ES6测试，ES6的出现是必然的趋势，模块化的管理方便js文件的复用，降低耦合度//默认导出、暴露
let num1 = 2022;function show(){alert("hello,es6");
}export default { //向外共享的数据，这样其他的模块就可以接收到num1,show
}export default {show
}
想要检查是否成功运行，就是用node的命令，node XX 就可以执行文件
PS D:\Vueprogramm\vue01> node Export.js
file:///D:/Vueprogramm/vue01/Export.js:15
export default {SyntaxError: Identifier '.default' has already been declaredat ESMLoader.moduleStrategy (node:internal/modules/esm/translators:115:18)at ESMLoader.moduleProvider (node:internal/modules/esm/loader:289:14)at async link (node:internal/modules/esm/module_job:70:21)
这里就发现了只能使用一次默认导出，因为默认导入就是接收默认导出的，如果多个默认导出，就不知道具体要接收那个的数据【数据是可能出现不同的变量的值的】
这里编写一个简单的Export.js文件来进行模拟
//这里just作为ES6测试，ES6的出现是必然的趋势，模块化的管理方便js文件的复用，降低耦合度//默认导出、暴露
let num1 = 10;function show(){alert("hello,es6");
}export default { //向外共享的数据，这样其他的模块就可以接收到num1,show
}
默认导入就是将已经共享了的数据成员给引入使用，默认导入的语法
import 接收名称 from '模块标识符' //这里就是从执行的共享的文件中接收指定名称的方法或者成员
这里的模块名称是一个字符串，使用单引号。默认导入使用任意的名称都可以，只要合法即可；不能以数字开头
这里编写一个Imprort文件来进行模拟接收的一方
//Import文件模拟的是另外一个需要使用另外一个模块的数据//从Export文件中接收数据，首先得到方法
import num1 from './Export.js' //需要注意这里引入的时候这是前台的路径，写成Export.js会是识别为资源路径
console.log(num1);
这里直接使用node的命令来进行运行js文件； 这里的num1接收的是放入的JSON的数据，不只是其中某一个数据； 因为默认导出的时候没有名称，所以接收的时候可以为任意的合法的名称；同时因为默认导出没有指定名称，所以这里就只能有一个default，不能有多个默认的default
PS D:\Vueprogramm\vue01> node Import.js
{ num1: 2022, show: [Function: show] }
需要注意的是要使用ES6的模块化规范，就必须要修改JavaScript的配置，在根结点中要加入type: 'module'；
按需导入和按需导出
按需导出的语法就是export 导出的成员
//这里就修改一下上面的导入导出的数据
//按需导出就是简单在声明变量的时候加上一个export关键字即可，导入的时候接收的就是导出的成员的JSON格式
export let num1 = 2022;export function show(){ //这里就是将这两个变量进行了按需导出alert("hello,es6");
}
按需导入就是import {成员的名称} from '模块名称' //模块名称就是导入的位置 —>这里的位置为前台路径; 想要导入多个值也容易，就是在大括号中放入多个成员，成员之间使用,来进行分割【在HBuilderX中写好路径之后，前面的成员就可以识别
//Import文件模拟的是另外一个需要使用另外一个模块的数据//从Export文件中接收数据，首先得到方法
import {num1,show} from './Export.js'console.log(num1);//因为已经导入了成员，就可以直接进行使用
这里运行得到的就是一个具体的
PS D:\Vueprogramm\vue01> node Import.js
2022
- 每一个js文件【模块】中可以使用多次按需导出，但是只能使用一次默认导出
- 按需导入的成员的名称必须和按需导出的名称保持一致
- 按需导入可以和默认导入一起使用
//默认导入的时候名称是任意的，指代的就是之前默认导出的那个JSON对象
import info,{num1 as year,show} from './Export.js' //info就是默认导出的空的JSON对象PS D:\Vueprogramm\vue01> node Import.js
{}
- 按需导入的时候可以使用as进行重命名
import {num1 as year,show} from './Export.js'console.log(year);//因为已经导入了成员，就可以直接进行使用
使用as重命名和之前的Mysql中取别名是类似的
直接导入并执行模块中的代码
如果只是像单纯地执行某个模块中的代码，但是不需要得到模块向外共享的成员，这个时候就可以直接导入并执行模块代码
import '模块路径'
这里可以简单演示一下
//被导入的模块的代码Export.js
//直接导入就是不需要得到被导入模块的数据，只是单纯执行模块的代码，就和之前在html中链入JavaScript代码类似
let year = 2022;
console.log(year + " 新年快乐呀"); //这里在HBuilderx中如果不小心按ins键，可能会改变光标为下横线，这个时候再按一次即可//导入的模块Import.js
//直接导入就类似之前的html的链入，只是简单的执行代码，而不需要使用数据
console.log("今年是哪一年呢？");
import './Export.js';
执行的结果为
PS D:\Vueprogramm\vue01> node Import.js
2022 新年快乐呀
今年是哪一年呢？
这里可以看出来导入的模块就是最先执行，不管是在之前还是之后进行导入，最先执行import语句
安装node，vue
这里我就简单在HBuilderX中的节点中加入即可，否则就会报错 ： Cannot use import statement outside a module，这里就引入外部的js文件的时候就不用写text/javaScrit
这里还是有问题，因为ES6模块化，这里就在HBuilerX中配置一下node方便直接运行js文件，而不需要再链入html中在下载node之前，这里解释几个名词：
webpack ： 主要的用途就是通过CommonJS的语法把所有的浏览器需要发布的静态资源做相关的准备，比如对资源进行打包
vue-cil： 用户生成的Vue工程的模板，和IDEA中的archetype类似，就是帮助快速建立一个vue的项目，只需要npm install就可以安装；Vue3之后换成了@vue/cil
这里安装node就简单在官网上进行下载： Node.js (nodejs.org)
安装成功之后会显示： C:\Users\OMEY-PC>node -v
v16.14.0
这里的node其实和之前的maven有些类似，安装的时候可以参考maven的过程，也有本地仓库cache和镜像；maven是repository
可以使用npm config ls来查看npm的配置信息 --- ls 就是list的简写//可以使用npm命令来进行修改
修改prefix的值：npm config set prefix 【全局仓库地址】
修改cache的值：npm config set cache【全局缓存地址】//简单一点就是直接在文件中进行修改就是C盘用户的.npmrc
registry=http://registry.npm.taobao.org
prefix=D:\nodejs\node_global
cache=D:\nodejs\node_cache在记事本中输入即可，第一个是配置镜像，和maven相同可以加快下载的速度//使用npm list -global查看本地仓库的信息
C:\Users\OMEY-PC>npm list -global
D:\nodejs\node_global
`-- (empty)//检查镜像站是否成功
C:\Users\OMEY-PC>npm config get registry
http://registry.npm.taobao.org///npm info vue 查看是否能够获得vue
S C:\Windows\system32> Npm info vuevue@3.2.31 | MIT | deps: 5 | versions: 370
The progressive JavaScript framework for building modern web UI.
https://github.com/vuejs/core/tree/main/packages/vue#readmedist
.tarball: https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz
.shasum: e0c49924335e9f188352816788a4cca10f817ce6
.integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==
.unpackedSize: 2.5 MB注意必须要以管理员身份运行cmd窗口
npm install xx -g 就是安装或者更新xx模块到设置的node_global中
这里就更新一下npm模块PS C:\Windows\system32> npm list -global
D:\nodejs\node_global
`-- npm@8.5.0
这个时候modules的位置就发生了变化，所以需要配置环境变量NODE_PATH :
安装vue
安装vue ，使用命令 npm install vue -g
安装vue-router，使用命令npm install vue-router -g，安装之后仓库中的dist就是distribution就是发布的产品，也就是需要的文件
安装vue-cli 使用命令npm install vue-cli -g 安装vue的脚手架
接下来要正常使用vue，需要配置环境变量，否则就要在当前目录打开cmd窗口【vue.cmd在node_global下面】，在path中加上路径即可
测试是否配置成功，输入命令vue -V
C:\Users\OMEY-PC>vue -V
2.9.6
脚手架vue-cil中的模板包括webpack和webpack-simple，后者简单一点
创建vue项目
vue create
跳转到项目放置的位置，然后vue create xxx
vue create vue01 //创建项目
cd vue01 //进入项目
npm run serve 运行，这个时候访问就localhost就可以运行项目
vue init webpack
这里使用vue的命令来初始化vue01
vue init webpack vue01 //初始化项目cd vue01
npm install //安装依赖npm run dev //运行 --- 进入localst：8080/#/或者
npm run build //直接打开dist文件夹下生成的index.html文件
注意创建项目的时候想要将项目放到哪里，就先将cmd命令跳转到哪里，必须要以管理员身份来运行
PS D:\Vueprogramm> vue init webpack vue01'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name vue01
? Project description first project
? Author Cfeng
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "vue01".# Installing project dependencies ..
还可以使用可视化的vue的界面，需要3以上的版本
PS C:\Windows\system32> vue ui
Vue铺垫知识 --- ES6模块化相关推荐
- 【Vue.js 知识量化】ES6 语法积累
ES6 语法 let / var const 的使用 class.extends.super 箭头函数(arrow function) 模版字符串(template string) 结构(destru ...
- Vue学习（增删改查、ES6模块化概念）-学习笔记
文章目录 Vue学习(增删改查.ES6模块化概念)-学习笔记 增删改查案例 ES6模块化概念 Vue学习(增删改查.ES6模块化概念)-学习笔记 增删改查案例 <!DOCTYPE html> ...
- 【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发 组件化 认识组件化 注册组件 全局组件和局部组件 父子组件 组件数据 父子组件的通信 父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
- vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件 实现方式 实现原理 实现方式 要引入的文件放在public目录下,在index.html中通过script标签引入 实现原理 参考vue官网–处理静态资 ...
- vue详细知识，语法和必备知识
文章目录 目录 1.vue简介 1.1 vue是什么 1.2 Vue的特点 1.3 学习Vue之前需要掌握哪些JavaScript基础知识 1.4 初识vue需要知道的地方 2. vue的核心基础 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...
- 前端工程化（ES6模块化和webpack打包）
文章目录 目标: 目录: 1.模块化相关规范 1.1.模块化概述 1.2.浏览器端模块化规范 AMD CMD 1.3.服务器端模块化规范 CommonJS 1.4.大一统的模块化规范-ES6模块化 1 ...
- 欢迎查看Vue总结知识
标题 欢迎查看Vue总结知识 一. VUE:用于构建用户界面的渐进式 框架 可以将项目的一部分使用vue实现,也可以使用Vue实现整个项目 二. 特点 易用:会html.css.js更快上手 灵活:不 ...
- 史上最详细易懂的ES6模块化语法（重点）
对于初次学习ES6的小伙伴来说,ES6的模块化语法是一个重点,在没有模块化之前,前端js代码有一下三句话 1.私密不漏 2.重名不怕 3.依赖不乱 一.接下来先演示在没有模块化之前,这个"私 ...
最新文章
- java swing中英文支持,java - Swing国际化 - 如何在运行时更新语言 - SO中文参考 - www.soinside.com...
- java 后台路线学习
- 同事给我埋了个坑：Insert into select语句把生产服务器炸了
- css盒模型和元素绘制
- UVA 11021 - Tribles(概率递推)
- Android Wear计时器开发
- 产品开发项目中文档的重要性
- MySQL 表和列的注释的添加以及查看
- ES9新特性_ES9正则扩展-反向断言---JavaScript_ECMAScript_ES6-ES11新特性工作笔记055
- python 详解re模块
- 计算机网络知识点总结
- Python学习笔记2：indent expected、unindent does not match any outer indentation level
- 神经网络训练用什么软件,神经网络训练ai玩游戏
- 2016 0CTF rsa
- Python-.item()的理解与使用
- 滴滴校招笔试题及解析
- 如何在Ubuntu 20.04上设置和配置证书颁发机构（CA）
- 选择适合你的虚拟现实体验
- java基础基础理论知识归纳（一）
- python微信聊天机器人源码_Python的微信二次开发！实战微信智能聊天机器人！
热门文章