项目结构说明 服务器上的项目结构大概是这样的： 在 /home 路径下有两个如下的项目文件夹： Vue-mall MiniProgram-Admin |--client |--...可能你会在本地开个服务器看看效果，但是呢，这时候的页面一定会是空白的，毕竟资源引用路径不对嘛，本地并没有 admin 文件夹。所以不用管本地预览效果了，直接上传到服务器即可。...这里主要是解决跨域问题，其实我们用 Nginx 的话直接通过反向代理就可以解决跨域，但之前本地开发的时候，我是通过 koa2-cors 解决跨域的，因此还是继续用这个方案吧，安装模块后，在app.js...同时，还需要再次修改 Nginx 的配置文件，在开头添加： upstream koa.server { server localhost:3000; } 和本地一样，服务器监听的是 3000 端口。...css 和 js 文件，并且对于返回的资源也是按照 css 或者 js 去解析的，所以在遇到 html 文件的 < 时就会出现解析出错的问题。
命令行测试运行 有些时候我们需要将项目部署在服务器上进行简单测试，但是直接部署到Tomcat里又十分慢，这时候我们可以用maven工具的一个命令来模拟本地启动项目: ....war 运行Maven命令导出包 为了保证项目能够在服务器中运行，最好将编译的过程放在服务器上，这样可以提早发现服务器版本落后的等的问题。...在项目根目录中有一个mvnw文件，我们通过下面命令执行他： ./mvnw clean package 这样，程序就会编译并且测试这个项目，以保证该项目能够在当前环境中运行。...配置反向代理 上面的项目在很多情况下会加载不了静态文件，因为项目中访问静态文件通常是直接在xxx.xxx.xxx/css之类的路径中，而Tomcat简单部署后项目的根路径会变成xxx.xxx.xxx/projectName.../，这样实际的静态文件路径就是xxx.xxx.xxx/projectName/css/，显然就会找不到了。
前言 在开始之前，请先确保你已经满足以下两个条件： 自己的电脑上安装了 Node.js ，如果还没有安装，可以参照我的另一篇教程 Node.js 的安装（多图版）； 拥有自己的 Github/Gitee...账号； 快速安装并开始 安装 首先使用如下命令在自己的电脑上安装 docsify-cli 工具，方便后续的创建和预览自己的文档网站； npm i docsify-cli -g 项目初始化 在自己的电脑上创建一个项目文件夹...: 作为主页内容渲染； .nojekyll : 防止 Github Pages 忽略下划线开头的文件； 本地预览 当我们编辑好文档后，想要在本地预览时，可通过如下命令运行本地服务器，然后在浏览器中访问...maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.<em>css</em>...； 预览 <em>在</em>浏览器中访问创建仓库时的给的网址即<em>可在</em>线预览我们的网站了，比如我的是：https://cunyu1943.github.io/cunyu1943，默认会显示封面页； 总结 经过上述的配置之后
前言 在开始之前，请先确保你已经满足以下两个条件： 自己的电脑上安装了 Node.js ，如果还没有安装，可以参照我的另一篇教程 Node.js 的安装（多图版）； 拥有自己的 Github/Gitee...账号； 快速安装并开始 安装 首先使用如下命令在自己的电脑上安装 docsify-cli 工具，方便后续的创建和预览自己的文档网站； npm i docsify-cli -g ?...项目初始化 在自己的电脑上创建一个项目文件夹，比如我的是 Docsify，然后进入该文件夹并打开命令行工具，通过如下命令来初始化项目； docsify init ./ ?...，想要在本地预览时，可通过如下命令运行本地服务器，然后在浏览器中访问 http://localhost:3000 进行实时预览（其中 3000 端口是 docsify 默认访问端口）； docsify...预览 在浏览器中访问创建仓库时的给的网址即可在线预览我们的网站了，比如我的是：https://cunyu1943.github.io/cunyu1943，默认会显示封面页； ?
图片的命名 默认打包后图片命名为32为的hash值（为了避免命名重复），但实际上在图片数量很多的时候我们希望能通过图片文件的命名一眼看出是哪一张，方便测试、维护。...搭建本地服务器 之前在调试的时候都需要打包，一旦文件很多的情况下，对于调试来说是非常费时的，所以需要搭建一个本地服务器，类似于热部署，在修改源码之后无需刷新自动更新页面。...webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架。...如此，键入npm run dev便可启动本地服务器，在改动源码时，浏览器会自动刷新。...注意： 如此，便可在不用修改配置的情况下键入npm run dev和npm run build正常进行启动本地服务和打包功能。
开启本地服务器(使用http协议，需安装webpack-dev-server，本地代码修改后实时打包自动更新刷新页面)、自己用node写服务器(使用http协议，不足是本地代码修改后虽然实时打包但页面仍需手动刷新才能看见最新显示...来进行 css3代码前缀自动添加、scss代码转成css代码、插入html页面head的style中 css模块化打包 开启css文件模块化打包，可以在某个js文件中 通过 import xxx from.../build/webpack.dev.js"，配置好后运行npm run dev-build命令完成后会在项目根目录生成stats.json文件，这个json文件中会有打包过程的各项信息。...webpack打包生成的dist文件通常最后是丢到服务器上供访问，如想在本地体验这种丢服务器上测试可以本地安装http-server，然后当打包完成后再运行scripts命令"start": "htt-server...PWA指实现当服务器挂掉/断网时浏览器本地可利用缓存继续访问该服务器中的原网页，有更好的用户体验。
而加载的时候，不管那些代码有没有执行到，都会下载下来并进行加载，造成性能浪费，这一点在显然在web端很重要，而在cordova中是将js代码直接打包在本地，等于跳过了下载步骤但仍然会有加载过程。...这方面有比较多的选择，Google Material Design 风格的Material-UI在github上最受欢迎，但其设计语言与我们当前APP截然不同，腾讯的weui和阿里的antd-mobile...Facebook积极探索css in js方式，但直接写内联样式代码可读性太差。...:local，执行watch-css命令，即可在scss文件旁自动产生css文件，且类名前自动添加:local 前缀，这种方法实践中发现并非所有类的样式都与:local 兼容良好，相应的可以使用文件名代替...，或者在package.json 文件增加一行"homepage": "../www"或"homepage": "."改为相对路径，否则会出现找不到文件的情况，这里推荐最后一种方式。
反向代理方式实际上就是一台负责转发的代理服务器，貌似充当了真正服务器的功能，但实际上并不是，代理服务器只是充当了转发的作用，并且从真正的服务器那里取得返回的数据。...对，很多用到nginx的地方都是作为静态伺服器，这样可以方便缓存那些静态文件，比如CSS，JS，html，htm等文件。 闲话就不多说了，我们直接来看看nginx怎么使用。...但实际上我们的需求不会是这样的，我们需要分文件类型来进行过滤，比如jsp直接给tomcat处理，因为nginx并不是servlet容器，没办法处理JSP，而html,js,css这些不需要处理的，直接给...因为这是个html页面，但它并不在ROOT目录下，而是在docs目录下，但当我们匹配html时，我们却到ROOT目录下去找，所以还是找不到这个页面。...一般情况下，如果我们需要用nginx来进行静态文件伺服，一般都会把所有静态文件，html,htm,js,css等都放在同一个文件夹下，这样就不会有tomcat这样的情况了，因为tomcat下的是属于不同的项目
现在有跨浏览器支持： aspect-ratio，防止布局变化的宽/高属性，本地图像惰性加载，以及纯 CSS/SVG-based 模糊图像占位符。...在客户端和服务器上都可以运行的同构 JavaScript（即可以在客户端和服务器上运行的代码）一直是许多 Web 开发人员的理想状态。...这种平台之间的不对齐意味着用于编写同构 JavaScript 的工具（例如 Next.js）需要添加 polyfill，以便开发人员可以在客户端和服务器上使用 fetch。...还有 Request、Response 和其他100多个现在可在浏览器和 Node.js 中使用的 API。...浏览器供应商和构建服务器基础设施的公司现在比以往任何时候都更加密切地合作，提供一组可在所有地方运行的标准 API，包括 edge 计算平台。
，即编译时加载 CMD和AMD是在运行时确定依赖关系，即运行时加载 详情： AMD && CMD ES6 模块化 每一个ES6模块都是一个包含JS代码的文件，模块本质上就是一段脚本，而不是用module...Node.js 一个基于 Chrome V8 引擎的 JavaScript运行环境 Node.js在服务端的优势是，它采用单线程和异步I/O模型，实现了一个高并发、高性能的运行时环境。...，此时引擎不会等待图片下载完毕，而是继续解析后面的标签； 重新渲染 服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容； 如果此时 js 脚本中运行了...Cache-Control 用于控制文件在本地缓存有效时长 比如服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。...Last-Modified 标识文件在服务器上的最新更新时间 下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since 字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改
分为上手篇和优化篇，本篇为上手篇，先介绍常用配置。 篇幅较长，可完整阅读，也可在遇到问题时即查即用。 此次采用webpack4，也顺便尝尝鲜。...在output中，还有一个叫publicPath非常重要，设置不正确会导致生成错的引用路径，从而找不到资源。这里先不展开，后面结合图片处理再细述。 2....css：内联进页面 loader 处理less和css等非js资源，需要安装相对应的loader npm install -D css-loader # 负责处理其中的@import和url() npm...以及html文件时，页面是不会刷新的(css-loader/html-webpack-plugin已具备热更新功能)，但更新js时会。...解决方法： 将本地服务器放在80端口上（Mac下需要sudo起服务），配置host：y.qq.com 127.0.0.1，此时使用http://y.qq.com/即可访问本地服务器。
，然后在dcdb_proj中运行npm link qcloud-components-react 使用qws启动本地NodeServer 前面准备好了qws和Node项目，接下来，我们看看如何将qws和...，你会发现，他们都是线上的文件而并非本地的代码，也就是说，你改了本地的JS/CSS文件并不会生效到页面上。...有了nproxy代理之后，我们还需要配置浏览器，将浏览器的请求打到我们的代理服务器上 图：浏览器配置 而其中的dcdb开发模式，指向的就是nproxy代理服务器。...有几个实际中遇到的问题分享一下： 首先，如果你发现的Chrome Console中有报错提示找不到某些模块，很有可能是需要运行qbt vms async去同步新的入口文件。...代理，将JS/CSS等资源映射到本地环境 如有需要，运行qbt vms async更新入口文件的依赖，配置webpackForNode支持服务端渲染。
从易用性角度考量，需要具备： 1）丰富但不烦琐的配置项； 2）支持多种运行环境，比如命令行和Node.js API； 3）兼容各类主流操作系统。...CDN服务器上； 2）文件名改变：经过构建之后文件名被加上hash指纹，内容的改动导致hash指纹的改变。...简单地讲，模块是一个白盒，侧重的是对属性的封装，重心在设计和开发阶段，不关注运行时逻辑；组件是一个可以独立部署的软件单元，面向的是运行时，侧重于产品的功能性，组件是一个黑盒，内部的逻辑是不可见的。...源码无须编译便可在浏览器环境下运行； c. 按需异步加载、并行加载； d. 插件系统。 CommonJS、AMD、CMD三者共同的缺点： a. 应用场景单一，模块无法跨环境运行； b....Webpack解决资源定位并不是按照上文所述的“正向”顺序，而是将项目构建输出的js和css文件“逆向”地注入到HTML文档中。
，Node.js在服务端的优势是，它采用单线程和异步I/O模型，实现了一个高并发、高性能的运行时环境。...html 标签，并将标签转化为DOM节点，生成 DOM树； 如果head 标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析； 如果引用了外部 js 文件，则发出...Cache-Control 用于控制文件在本地缓存有效时长。...最常见的，比如服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。...在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。 Last-Modified 是标识文件在服务器上的最新更新时间。
在本教程中，我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。 如果你只是想使用 Vue.js 库和 Flask 模板基本上是没什么问题的。.../dist'), 所以， 包含 html/css/js 静态资源包的 /dist 文件夹和 /frontend 在同一级目录下。现在你可以运行 $ npm run build 去构建项目了 ?...最主要的不同点在于我们详细指明了前端的静态和模板文件夹输出到 /dist 文件夹。然后在根目录下运行 Flask 服务。...FLASK_APP 指向服务启动文件， FLASK_DEBUG=1 将会以调试模式运行。如果没有错误，你将会看到熟悉的首页，这样，服务器就成功运行 Vue 应用了。...在 Vue.js 应用里处理未定义的路由。当然，所有的工作均可在我们的路由文件设置。
参数 nowa init 在初始化新项目时，接受以下候选参数： -f, --force 是否强制更新模板 如果不给出 force 参数，模板将在本地缓存 24 小时，在 24 小时后的第一次执行时自动检查并下载更新...当回答完一些必要的问题之后，脚手架会开始自动生成新页面相关文件（包括 html、js 和 css）。 ?...属性中，必须给出 -f, --force 是否强制更新模板 如果不给出 force 参数，模板将在本地缓存 24 小时，在 24 小时后的第一次执行时自动检查并下载更新 新模块 ---...当回答完一些必要的问题之后，脚手架会开始自动生成新模块相关文件（包括 js 和 css）。 ? image.png 等待初始化完毕后，便可在其他页面或模块中引用新建的模块了。...2.3 持续的功能增强 借助社区和团队自身的力量，UXCore 会在现有基础上优化使用体验，增强组件功能，添加更多常用组件来满足不同场景的需求。 3.
HTML5缓存 我们在访问网站的时候，会从网站服务器中下载很多数据，其中包括css文件、图片文件、js文件、音频文件等等，有时候一个页面这种零零散散的文件就要下载上百个，可以打开浏览器的开发者工具，点击...因此我们需要将一些不怎么发生变动的静态文件例如图片、css、js文件等等，保存到本地上，下一次再访问网站的时候就可以从本地上直接读取这些文件，不用再去服务器下载一遍了，所以浏览器就有了本地缓存的机制。...运行结果，在浏览器中打开开发者工具，可以看到创建好的数据库和表格： ?...sessionStorage 的使用方式基本上和localStorage是一样的，除了时间限制和存储方式外，但其中的函数使用是一致的，同样的有两种添加和获得数据的方式。...MANIFEST js/hello.js css/a.css 上面的 manifest 文件列出了两个资源：一个 CSS 文件，一个 JavaScript 文件。
7、Node.js中模块加载机制 （1）模块查找规则-当模块拥有路径但没有后缀时 image.png require方法根据模块路径查找模块，如果是完整路径，直接引入模块。...如果模块后缀省略，先找同名JS文件再找同名JS文件夹 如果找到了同名文件夹，找文件夹中的index.js 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件...首先看是否有该名字的JS文件 再看是否有该名字的文件夹 如果是文件夹看里面是否有index.js 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件 否则找不到报错...客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。 服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。...本机域名：localhost 本地IP ：127.0.0.1 （2）创建web服务器 // 引用系统模块 const http = require('http'); // 创建web服务器
如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验； 5、是否了解公钥加密和私钥加密。...向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取...、理解和接受 200——表明该请求被成功地完成，所请求的资源发送回客户端 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整...简洁版： 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求； 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）； 浏览器对加载到的资源（HTML...）； 页面进行标注（例如页面 模块 开始和结束）； CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）； JS 分文件夹存放 命名以该JS功能为准的英文翻译。
以上只是在项目中安装了 less 和 less-loader ，但还未曾通过 webpack 使用 less-loader。 至于怎么使用？几种使用方式？...暴露 webpack 配置文件 突然，您会发现在我们实验项目中找不到 webpack 相关配置文件。...# 生产环境配置 webpackDevServer.config.js # 开发服务器配置 我们需要关注的是前两个，最后一个是关于本地开发服务器http://localhost:3000的一些相关配置...修改 webpack 配置 理论上讲，需要同步修改 webpack.config.dev.js 和 webpack.config.prod.js 配置文件： 在module.rules节点中找到 css...} 然后在App.js文件中通过如下API导入上述的 less 文件： import '.
领取专属 10元无门槛券
手把手带您无忧上云
