黑马前端学习笔记（从vue2.0到vue3.0）第一天P1-P20

我是跟着bilibili的黑马课程一起学习的这些都是我大概遇到的问题 我会详细记录下来

刚刚开始学习 首先记得保存，因为我是学java的从来不保存，导致不出现效果，但是也不用着急，继续跟着学习就可以。

P5在配置中或者是说webpack.config.js中里面的module.exports属性中

mode：运行模式

entry：处理那个文件

output：指定生成那个文件

                                path：生成存放路径

                                filename：输出名字

P10 安装和配置webpack-dev-server插件遇到重大BUG

原因是可能是webpack版本不行了需要更换新版本

首先删除

在黑窗口中运行

npm install -D webpack-cli@4.9.0 @webpack-cli/update

 重新run 成功运行成功

P11   odd奇数选择器，even偶数选择器，从0开始      

P12  如何停掉黑窗口的服务

Ctrl+c 两次

安装插件时候不加版本号下载的就是最新的

P12安装html-webpack-plugin插件出现问题

问题解决 大小写出现错误 

写入时候 自动变为大写 

还有大概率问题是不加 ‘ ， ’

修改后注意保存

 P14 在webpack.config.js中的devServer属性中{

open：ture， //打包后，自动打开浏览器

host：‘127.0.0.1’，//指定运行的主机地址

port：80 //端口号配置 http端口号是80可以省略

}  配置改动必须重启服务

P15 以后不会再html引入css文件样式 在js引入css文件 但是要配置js

语法为   import '’

还需要加入插件   npm i style-loader@3.0.0 css-loader@5.2.6 -D

P16 在webpack.config.js中module.exports的module属性中

moule：{

rules：【定义不同的loader 

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

】

}

P20 如何在js引入图片并设置

首先进行配置

npm i url-loader@4.1.1 file-loader@6.2.0 -D

安装完成后

在配置文件详情见9题增加一条

 {test:/\.jpg|png|gif$/,use:'url-loader'}

最后在js写入绑定图片与引入

     import logo from './images/logo.jpg'

      $('.box').attr('src',logo)

测试成功

至此 p20笔记