![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端项目搭建练习
文章平均质量分 79
前端项目搭建练习
郭艺宾
富有激情的学习Java
展开
-
前端项目练习(练习-007-typescript-02)
document.querySelector是一个选择器,这里根据id选择了toLogin按钮,下面的 addEventListener 是在按钮是加了一个click事件,表示点击时执行 location.assign() 代码,这个方法表示直接跳转到一个新的页面。前面的例子,我们使用了nodejs+webpack,成功创建了包含html,ts,css三个文件的项目,并且在运行项目后,可以动态的修改内容,不用重启就可以在浏览器查看修改后的结果。现在打包就可以发现html引入的css和js文件都正常了。原创 2023-09-26 18:04:33 · 195 阅读 · 0 评论 -
前端项目练习(练习-006-typescript-01)
学习前,首先,创建一个web-006项目,内容和web-005一样。(注意将package.json中的name改为web-006)原创 2023-09-26 10:26:38 · 186 阅读 · 0 评论 -
前端项目练习(练习-005-webpack-03)
执行npm run dev重新启动项目,修改三个文件代码,可以看到,在不重启的情形下,三个文件代码修改的效果都可以实时看到。它不会产生dist文件,将打包结果暂时存在内存中,内部的http-sever访问这些文件并读取数据,发送给浏览器。其中,open:true 表示启动成功后,自动打开浏览器,port表示端口,compress:true 表示压缩。在项目启动完后,不重启项目的情况下,修改js文件和css文件,可以看到项目可以自动刷新并执行最新的代码。它会减少磁盘的读取,提高构建效率。原创 2023-09-25 17:30:45 · 409 阅读 · 0 评论 -
前端项目练习(练习-004-webpack-02)
学习前,首先,创建一个web-004项目,内容和web-003一样。(注意将package.json中的name改为web-004)前面的例子,成功将js文件打包到了dist中,但是我们有三个文件,css,js和html,还有css和html文件没有打包。webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。要想打包更多类型的文件,需要使用插件。插件可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量等。原创 2023-09-25 16:25:31 · 276 阅读 · 0 评论 -
前端项目练习(练习-003-webpack-01)
学习webpack前,首先,创建一个web-003项目,内容和web-002一样。(注意将package.json中的name改为web-003)想想,我们开发Java 的时候,Maven帮我们做的主要是编译,打包等等内容。开发前端其实也需要类似的工具。当然打包用的构建工具肯定不止一个,我们先从webpack开始入手。原创 2023-09-25 14:55:45 · 1048 阅读 · 0 评论 -
前端项目练习(练习-002-NodeJS项目初始化)
package.json是一个基于JSON格式的文件,用于描述Node.js项目中所需的模块以及项目的元数据。它是一个非常重要的文件,几乎所有Node.js项目都需要一个package.json来维护其依赖性和元数据。在Node.js项目中,通过使用 npm 来管理项目的所有依赖关系,而npm又通过读取package.json来确定需要安装哪些依赖包和各个依赖包的版本等信息。来看一下package.json文件的内容:目前都是初始化项目时的默认参数,没有其他内容。原创 2023-09-25 11:36:30 · 315 阅读 · 0 评论 -
前端项目练习(练习-001-纯原生)
这就是第一个项目的搭建,是从我们熟悉的老模式开始的。可以看到,字体颜色和控制台打印的效果都很正常。原创 2023-09-25 10:25:39 · 135 阅读 · 0 评论