Web前端开发之VUE01——ES6导入和导出、promise、webpack、vue项目介绍、vue安装过程

言行物恒

已于 2022-04-24 15:04:47 修改

阅读量1k

点赞数

分类专栏： # Web前端开发——Vue 文章标签：前端 node.js vue.js

于 2022-04-09 12:23:15 首次发布

本文链接：https://blog.csdn.net/HAC_SOUL/article/details/123964683

版权

Web前端开发——Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

loader加载器,用于加载css等其它后缀名模块:

默认导入和按需导入：

默认导入：

按需导入：

回调地狱：

promise:

Promise构造函数

Promise(excutor){}，excutor是执行器（resolve,reject）=>{}，在promise内部立即同步调用，异步操作在执行器中执行。

Promise.resolve方法

返回一个Promise对象，状态取决于传入参数类型。传入的参数为非promise对象，则会返回一个成功状态的Promise对象，传入的参数为promise对象，参数对象的状态会决定返回的Promise对象的状态

Promise.reject方法

Promise.reject返回一个失败状态的Promise对象,无论参数是什么，都会是失败状态，即使参数传入成功状态的Promise对象，返回的Promise值是成功的Promise对象，但状态仍为失败。

.catch捕获错误：

promise.all()方法：

promise.race()方法：

async/await:

示例代码：

const fs=require('fs')
const thenFs=require('then-fs')

// let pms=new Promise(
//
// )

// fs.readFile(__dirname + '/File/1.txt', "utf-8", (err, data) => {
//     if (err){}else{
//         console.log(data)
//     }
// })
// fs.readFile(__dirname + '/File/2.txt', "utf-8", (err, data) => {
//     if (err){}else{
//         console.log(data)
//     }
// })
// fs.readFile(__dirname + '/File/3.txt', "utf-8", (err, data) => {
//     if (err){}else{
//         console.log(data)
//     }
// })

//顺序执行：
// thenFs.readFile(__dirname + '/File/1.txt','utf8')
//     .then(res=>{
//     console.log(res)
//     return thenFs.readFile(__dirname + '/File/2.txt','utf8')
// }).then(res=>{
//     console.log(res)
//     return thenFs.readFile(__dirname + '/File/3.txt','utf8')
// }).then(res=>{
//     console.log(res)
// })

const execLineArr=[
    thenFs.readFile(__dirname + '/File/1.txt','utf8'),
    thenFs.readFile(__dirname + '/File/2.txt','utf8'),
    thenFs.readFile(__dirname + '/File/3.txt','utf8')
]

//promise方法
// Promise.all(execLineArr)
//     .then(([r1,r2,r3])=>{
//         console.log(r1,r2,r3)
// }).catch(err=>{
//     console.log(err)
// })

//race方法：
// Promise.race(execLineArr)
//     .then(res=>{
//         console.log(res)
//     })

async function getAllFile() {
    const r1=await thenFs.readFile('./File/1.txt','utf8')
    //使用await方法，就必须加上async头
    //await可以切换当前promise对象为以值输出
    console.log(r1)
}
getAllFile()

同步任务与异步任务：

EventLoop:

宏任务和微任务：

webpack入门及使用:

使用方法:

1.初始化package-----使用[yarn init -y]已完成操作.

2.新建src文件夹-----默认开发区域就在这个文件夹.

3.加入index.html和index.js-----由于package.json中包含main入口,默认是index.js.

4.第三步操作中入口js是index.js.所以项目会优先调用index.js,并运行.

5.当我们编辑完index.js后,在index.html中写入页面代码,并引入index.js模块.

6.在前一步中如果使用到import语句,可能会报错,提示"Cannot use import statement outside a module",这是由于ES6具有浏览器兼容性问题,所以此处需要webpack以解决js兼容问题.

7.yarn指令的使用请使用[npm install -g yarn]全局安装好yarn):

一些基础代码如下:

//1.检查当前yarn的bin位置
yarn global bin
//2.检查当前yarn的全局安装位置
yarn global dir
//3.卸载yarn
npm uninstall -g yarn

_____________________

8.使用yarn add webpack webpack-cli -D以在项目中安装webpack,因为只有开发时需要,所以使用-D作为开发模式下绑定.

9.在项目根目录中添加webpack.config.js,并在其中输入:

module.exports = { mode: 'development' }

其中mode构建模式属性可以是两个值,一个是development,一个是production.

10.在package.js中添加新的脚本,在scripts中添加如下代码:

"scripts": {
  "dev": "webpack"
}

脚本的使用方法: [yarn run 脚本名]使用此命令以执行脚本,脚本名就是json键,比如此处,则运行yarn run dev即可完成脚本的运行.启动dev脚本可以对项目进行打包和构建,其打包的根据就是webpack.config.js中的设置.

11.项目中会多一个dist文件夹,其中会有一个main.js,就是已经打包和解决过兼容性的js文件.所以我们就可以把index.js的引用改为main.js的引用.

12.打开index.html就可以实现效果.

mode节点可选值:

webpack.config.js的作用:

自定义webpack打包入口和出口:

const path = require('path')

module.exports = {
  mode: 'development',// mode 用来指定构建模式
  entry: path.join(__dirname+'/src/index.js'),//入口
  output: {//出口
    //出口路径
    path: path.join(__dirname+'/dist'),
    //打包后的名称
    filename: "bundle.js"
  }
}

插件:

自动打包插件:

webpack-dev-server插件:

使用如下命令,完成对此插件的在项目中的安装:

yarn add webpack-dev-server -D

修改scripts脚本为:

"scripts": {
  "dev": "webpack serve"
}

再使用yarn run dev,以启用代码变动自动打包.

如果出现Content not from webpack is served from XXXX directory

其中XXXX路径错误的情况,一般会指向项目中public文件夹,并在其中寻找index.html.

此时如果项目没有public文件夹,就会请求出错.

我们需要在webpack配置中加入,以告诉服务器我们默认访问的路径,主需要写到index.html的所在路径就可以,不需要写index.html,具体代码如下:

devServer: {
  // contentBase: __dirname, -- 请注意，这种写法已弃用
  static: {
    directory: path.join(__dirname, "/src"),
  },
},

实时打包:

html-webpack-plugin插件:

安装指令:yarn add html-webpack-plugin -D

配置插件:

devServer节点配置:

loader加载器,用于加载css等其它后缀名模块:

安装loader:

在webpack中万物皆可导入.但是当我们导入less或css就会在打包时报错.

此时我们需要使用loader,安装指令如下:

yarn add style-loader css-loader less-loader sass-loader -D

此命令安装了style解析,css解析,less解析,sass解析.

安装后,在webpack配置中加入,以:

module: {
  rules: [
    {test:/\.css$/,use:['style-loader','css-loader']},
    {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
  ]
}

use的顺序一定不能错,不然会报错.

样式表中图片url的设置:

由于webpack打包时,发现png的格式文件,也并没有找到相应的loader,此时就会报错.

此时,我们需要使用命令:

yarn add url-loader file-loader -D

配置方法:类似css-loader的配置:

解决图片依旧无法显示的问题:

设置rules:

{
  test: /\.(png|jpg|jpeg|gif)$/,
  use: {
    loader:'url-loader',
    options: {
      limit: 10000,
      esModule:false, //图片不显示的问题解决
    }
  },
  type: "javascript/auto"//设置转换:自动
}

本处参照:webpack使用url-loader图片加载失败解决办法_沉淀在网页的博客-CSDN博客现在webpack5中要使用url-loader比较麻烦必须加点东西{test: /\.(png|jpg|gif|jpeg)$/,use: [ { loader: 'url-loader', options: { limit: 30000, esModule: false } }],type: 'javascript/auto'}也就是options里面加一https://blog.csdn.net/QQ1443003435/article/details/121108377