1.SSR 服务器端渲染
2.Mathjax加载慢,框架框架如何在Nuxt中加载本地JS文件
3.如何找到软件的源码优缺源代码
4.SvelteKit 初学者入门实践指南 (1)
5.å¦ä½ç¨vueå¼åç½ç«(ç¨vueå¼å大åç½ç«)
6.Nuxt.js踩坑记,利用Nuxt一键生成多页面静态站点
SSR 服务器端渲染
近年来,框架框架服务器端渲染 (SSR) 在前端开发中越来越受欢迎,源码优缺特别是框架框架与React的next框架和Vue的nuxt框架结合。不同于前端框架默认的源码优缺移动端报表源码浏览器渲染,SSR允许在服务器端生成HTML,框架框架再将预处理的源码优缺静态内容发送到浏览器,形成一个交互性强的框架框架客户端应用。
常规的源码优缺浏览器渲染依赖JavaScript动态生成HTML,比如React和Vue中的框架框架路由功能。相比之下,源码优缺服务器端渲染则是框架框架通过后端语言(如Java配合VM模版引擎或NodeJS配合Jade)生成完整的HTML文档,这些文档在发送给浏览器之前已经预渲染好了内容。源码优缺
要实现SSR,框架框架首先从新建项目开始,安装Vue及其SSR库vue-server-renderer。在testSSR目录下,创建一个简单的Vue组件,确保在HTML根元素上添加"data-server-rendered"属性,以标识这部分是由服务器端渲染的。接下来,可以创建一个HTML模板,将组件内容作为注释嵌入其中,使用fs库读取并注入到渲染器中。网站滚动通知源码
为了实现服务器整合,选择Node.js的Express作为基础框架,构建一个可以处理每个请求的Vue实例。在server.js中配置Express服务器,创建app.js并配置路由和渲染逻辑。然后,将应用到index.template.html模板并测试。
在项目工程化阶段,为了兼容客户端和服务器端的需求,需要创建不同的webpack配置,例如entry-server.js和webpack.server.config.js,分别生成服务器端和客户端的bundle。通过配置vue-router和webpack,实现路由管理以及资源预加载。最后,使用createBundleRenderer处理源代码更改和source map问题,提高开发效率。
除了基础配置,Vue SSR还提供了更丰富的功能,如CSS管理、缓存管理、流式渲染等。进一步了解和实践,可以参考Vue SSR官方指南和API文档。制作器 源码
Mathjax加载慢,如何在Nuxt中加载本地JS文件
在 Vue 或 Nuxt 中如何渲染数学公式?本文将探讨在 Nuxt 中使用 Mathjax 的方法。尽管使用 CDN 加载 Mathjax 便于集成,但它可能影响页面性能,导致加载速度变慢。
为提升性能,本地加载 Mathjax 提供了一种解决方案。你只需通过 npm 将 Mathjax 安装至项目中即可。
然而,要在 Nuxt 中整合 Mathjax 并非易事,因可用资源有限,且遵循官方文档可能不适用于 Nuxt。此时,本地加载 Mathjax 的 JS 文件成为了一种可行且简便的方法。
以下是具体操作步骤:
1. 下载 Mathjax v4.0.0-beta.6 的源代码。
2. 将所有 Mathjax 文件放置于 `public/mathjax` 目录下。若使用 VSCode 编写 Nuxt 项目,请避免报错 `To enable project-wide JavaScript/TypeScript language features, exclude large folders...` 的情况。
3. 修改 `nuxt.config.ts` 文件以确保正确配置。
通过本地加载 Mathjax 的 JS 文件,你可以在不牺牲性能的前提下,高效地在 Nuxt 应用中渲染数学公式。
如何找到软件的源代码
源码就是指编写的最原始程序的代码。运行的自适应首页源码软件是要经过编写的,程序员编写程序的过程中需要他们的“语言”。音乐家用五线谱和音符,建筑师用图纸和笔,那程序员的工作的语言就是“源码”了。
人们平时使用软件时就是程序把“源码”翻译成我们可直观的形式表现出来供我们使用的。[1]
任何一个网站页面,换成源码就是一堆按一定格式书写的文字和符号,但我们的浏览器帮我们翻译成眼前的模样了
SvelteKit 初学者入门实践指南 (1)
SvelteKit 初学者入门实践指南 SvelteKit 是利用 Svelte 构建 Web 应用的框架,如同 React 与 Next.js 或 Vue 与 Nuxt.js 的关系。在开始使用 SvelteKit 之前,需要先掌握 Svelte 基础知识。1. 创建 SvelteKit 应用
通过 `npm create svelte@latest blog` 创建一个简易博客程序,创建过程会询问项目类型和添加 TypeScript、Vitest 等选项,推荐选择 TypeScript 以提高编写后台代码的便利性。这里选择 "Skeleton project" 作为示例。2. 安装 Svelte VSCode 插件
安装官方 Svelte for VSCode 插件以优化编辑体验,提供对 .svelte 文件的语法支持。3. 适配器与依赖安装
安装前,修改 package.json 中的 adapter,将 "adapter-auto" 更改为 "adapter-node",以便针对云服务器或Serverless环境部署。默认的 adapter-auto 会自动选择云服务,但国内通常使用本地服务器,易语言源码抽奖因此手动指定为 node。4. 编写第一个页面与路由
通过 `npm run dev` 启动开发服务器,查看初始页面并创建路由,如 src/routes/+page.svelte。注意,页面组件以 +page.svelte 标识,代表支持路由。5. 布局与URL路由
SvelteKit 使用文件夹结构表示路由,如 albums 和 about 文件夹对应相应的页面。路由规则中,+号前缀表示支持路由,避免了与 index.svelte 的混淆。6. 布局与公共内容
通过 +layout.svelte 文件组织公共内容,减少页面间的重复代码。7. 项目结构
了解项目的基本结构,包括 .svelte-kit 临时文件夹,src 存放源码和路由,static 存放静态资源,以及其他配置文件。8. 总结
通过本章节,你已建立了基础的 SvelteKit 项目,理解了适配器、路由规则和布局的应用。接下来会逐步扩展功能,深入理解 SvelteKit 的更多特性。å¦ä½ç¨vueå¼åç½ç«(ç¨vueå¼å大åç½ç«)
vueåç½ç«seoçé®é¢
å¼åä¸ä¸ªåºäºVueçç½ç«æ¶éè¦æ³¨æçSEOé®é¢æï¼
éææ é¢åæè¿°ï¼æ é¢åæè¿°å¿ é¡»æ¯éæçï¼ä¸è½å¨è¿è¡æ¶å¨æçæï¼å 为æç´¢å¼æéè¦è¯»åå®ä»¬ã
é¿å 使ç¨JavaScriptå¨æçæå 容ï¼æç´¢å¼æä¸ä¼è¯»åJavaScriptå¨æçæçå 容ï¼å æ¤ï¼å¦æä½ æ³å¨æç´¢ç»æä¸æ¾ç¤ºè¿äºå 容ï¼ä½ éè¦ä½¿ç¨éæçHTMLã
å ³é®åä¼åï¼ç¡®ä¿ä½ çå ³é®å被å å«å¨æ é¢ãæè¿°ãå ³é®ååå 容ä¸ã
é¾æ¥ç»æï¼ä½¿ç¨ææä¹çé¾æ¥ç»æï¼è¿å°å¸®å©æç´¢å¼ææ´å¥½å°çè§£ä½ çç½ç«ç»æã
SitemapåRobots.txtï¼ä½¿ç¨Sitemapåè¯æç´¢å¼æä½ çç½ç«ç页é¢ï¼å¹¶ä½¿ç¨Robots.txtæ件åè¯æç´¢å¼æåªäºé¡µé¢ä¸éè¦è¢«ç¬åã
ååºå¼è®¾è®¡ï¼ä½¿ç¨ååºå¼è®¾è®¡ï¼ä»¥ç¡®ä¿ä½ çç½ç«å¨ç§»å¨è®¾å¤åæ¡é¢è®¾å¤ä¸é½å¾å¥½å°æ¾ç¤ºã
å¨å¼åVueç½ç«æ¶ï¼è®°å¾éµå¾ªè¿äºSEO建议ï¼ä»¥ç¡®ä¿ä½ çç½ç«å¨æç´¢ç»æä¸å¾å°æ好çæå ã
webå端å¼ä¹ç½ç«æ建æ¡æ¶ä¹vue详解
ç½ç«æ建æ¡æ¶ä¹vue
Vueæ¯webå端快éæ建ç½ç«çæ¡æ¶ä¹ä¸ãå®ä¸jQueryææä¸åï¼æ¯ä»¥æ°æ®é©±å¨webçé¢ï¼ä»¥æä½æ°æ®æ¹å页é¢ï¼èjQueryæ¯ä»¥æä½èç¹æ¥æ¹å页é¢ï¼ï¼åæ¶ï¼vueè¿å®ç°äºæ°æ®çååç»å®ï¼å¯åæ¶ååºç¨æ·çè¾å ¥ãæ主è¦çæ¯vueçåæ³ç®åï¼å®¹æææ¡ï¼ç»ä»¶å½¢å¼å¯ä»¥å¤§å¤§æé«å·¥ä½æçã
对äºvueç使ç¨å¯ä»¥å为两ç§ä½¿ç¨å½¢å¼ï¼1.å¼å ¥vue.jsæ件ï¼å¨jsä¸å°vueå®ä¾åï¼2.éè¿nodeå®è£ 第ä¸æ¹å --vueï¼æ建èææ¶ï¼ç¨èææ¶å°é¡µé¢åæå 个ç»ä»¶ç¼åï¼ä»èå©ç¨ç»ä»¶æ¥æ建页é¢ã
å¼å ¥vue.jsçåæ³
Vueå为Vå±ï¼è§å¾å±ï¼åMå±ï¼æ°æ®å±ï¼ï¼ä¸è¬é½æ¯ç±Må±çæ°æ®æ¥é©±å¨Vå±çæ¹åãèvueç常ç¨æ令æ°éä¸å¤ä¸åæ³ç®åã常ç¨çæv-htmlãv-textãv-showãv-ifãv-elseãv-forãv-bind:ãv-modelãv-htmlåv-texté½æ¯å°æ°æ®åè¿æ ç¾å ï¼ä½å®ä»¬çä¸åä¹å¤å¨äºv-textä¼å°æ ç¾å½åææ¬å 容åå ¥
ï¼èv-htmlåä¼å¯¹æ ç¾è¿è¡ç¼è¯ï¼åªæ¾ç¤ºæ ç¾å çå 容ã
è³äºv-showãv-ifãv-elseè¿ä¸ä¸ªæ令é½æ¯éè¿å¸å°å¼çå¤ææ¥æ§è¡çï¼å½å¸å°å¼ä¸ºçæ¶ï¼è®¾ç½®äºv-showãv-ifæ令çæ ç¾ä¼æ¾ç¤ºåºæ¥ï¼å½å¸å°å¼ä¸ºåæ¶ï¼æ ç¾éèï¼èv-elseä¸è¿ä¸¤ä¸ªæ令ç¸åãé¤æ¤ä¹å¤ï¼v-showåv-ifãv-elseä¹é´ä¹æå·®å«ï¼v-showæ¯æ¹åæ ç¾çdisplayå±æ§æ¥ä½¿æ ç¾æ¾ç¤ºæéèï¼èv-ifãv-elseæ¯éè¿æ·»å æå é¤èç¹ï¼æ¥æ¾ç¤ºæéèæ ç¾çã
V-foræ¯vueçä¸ç§éåæ¹æ³ï¼è¿ä¸ªæ¹æ³æ大çç®åäºæ°ç»æ对象çéå并æ¾ç¤ºå°é¡µé¢çæ¥éª¤
èv-bindï¼æ¯å¯¹htmlå±æ§æèªå®ä¹å±æ§çæ°æ®é©±å¨æ¹å¼ï¼æ ¼å¼ä¸ºv-bind:hrefï¼å¯ç®å为ï¼hrefã对äºç±»ï¼classï¼çæä½æ¯éè¿å¸å°å¼æ¥å¤æå¢å æè éèç±»ï¼åæ¶ãç±»åæ ·å¼ï¼styleï¼ææ¥åçæ°æ®ç±»å为对象ã
V-modelæ令çä½ç¨æ¯å°æ°æ®è¿è¡ååç»å®ï¼ä» éäºè¾å ¥ç±»åæ ç¾ãå½ç¨æ·å¨é¡µé¢è¾å ¥æ¶ï¼æ°æ®å±çæ°æ®ä¼è·çæ¹åãè¿æ¯VM模å¼ãç±v驱å¨mã
é¤äºè¿äºæ®éçæ令ä¹å¤ï¼è¿æäºä»¶æ令v-on:ï¼å¯ç®å为@+äºä»¶åï¼ä¾å¦ï¼@clickï¼å¹¶å°æ§è¡å½æ°åå°vueçmethodsä¸
éè¿èææ¶æ¥å项ç®çè¯ï¼å¯ç¨éè¿åç»ä»¶ï¼åå°ç»ä»¶å¼å ¥ï¼æ³¨åï¼å°å¦ä¸ä¸ªvueæ件éæ¼æ¥å¨ä¸èµ·ï¼ä»èæ建åºä¸ä¸ªé¡µé¢ã
ï¼ç»ä»¶ä¹¦åæ ¼å¼ï¼
ï¼ç»ä»¶æ´åï¼
ï¼æ³¨åè·¯ç±ï¼
è·¯ç±æ¯éè¿vue-routeræ¥å®ç°çï¼å¨æ³¨åè·¯ç±çæ¶åè¦å°routerå®ä¾åãä¸åçè·¯ç±è·³è½¬ä¸åç页é¢ï¼è¿æ¯æ建å页é¢åºç¨çä¼å¿ã
èç¶ç»ä»¶ä¸åç»ä»¶ä¹é´çé讯å¯ä»¥éè¿propså°ç¶ç»ä»¶çä¿¡æ¯ä¼ éç»åç»ä»¶ï¼æ¹ååç»ä»¶çå 容ï¼è¿æ ·åç»ä»¶çå¤ç¨å°±ä¸ä¼æéç¢äºï¼èåç»ä»¶ä¼ éä¿¡æ¯ç»ç¶ç»ä»¶æè å ¶ä»ç»ä»¶çé讯åévuexã
éè¿å¼å ¥vuex并å®ä¾åä¸ä¸ªVuex.Storeä½ä¸ºä¸ä¸ªå ¬å ±å¹³å°ï¼å°æ°æ®è¿è¡ä¼ è¾ãéè¿vueçcomputedæ¹æ³æ¥æ¶æ°æ®ï¼éè¿methodsæ¹æ³æ¹åæ°æ®ãèè¿ä¸ªå ¬ç¨å¹³å°å¯ä»¥å®ç°ç»ä»¶ä¸ç»ä»¶ä¹é´çä¿¡æ¯ä¼ éï¼ä»èå®ç°ç»ä»¶ä¹é´ç交äºã
éè¿ä¸ä¸ªææçå®æï¼æ·±æ·±çä½ä¼å°äºvueçä¼å¿ï¼å¨æ建移å¨ç«¯è¿æ¹é¢çæçå¾é«ãä½å¨æ建çè¿ç¨ä¸ï¼è¿æ¯å°ä¸äºä¸jQueryç»åï¼æ¯ç«æ¯ä¸ªå·¥å ·é½æå ¶ä¼ç¹ï¼æ©å ¶ä¼èç¨æ¯ææºçéæ©ã
第äºç« ï¼ç¨elementãflaskãvueå¼åä¸ä¸ªæ°æ®å å¯ç½ç«å¨æ¬ç« ä¸ï¼æ们è½å¦å°ï¼
å ¬ä¼å·ãå¸ å¸ çPythonãåå¤ãæ°æ®å å¯ãè·åæºç
æ们å¨ç½ä¸æç´¢md5å å¯ï¼ä¼åºæ¥å¾å¤çç½ç«ï¼ä½æ¯é½æ¯å ³äºå个å符ççå å¯ï¼å ¶ä¸å å¯ç®æ³æmd5åshaå å¯ãä½æ¯å½ææ1ä¸æ¡æ°æ®ï¼å¦ä½å å¯ï¼æ»ä¸è½ä¸æ¡ä¸æ¡çå¤å¶ç²è´´è¿å»å å¯ï¼è¿å¾ä¸ç°å®ã
å°å¡å³å®å åèè¿äºç½ç«åä¸ä¸ªç®åçå符串å å¯ç½ç«ï¼ç¶åååå ³äºExcelæ件çå å¯ç½ç«ã
æ们çè¿äºç½ç«é½æ¯ç±ä¸¤ä¸ªè¾å ¥æ¡ï¼ä¸é´å ä¸é项ç»æçï¼æ¯å¦ä¸é¢è¿ç§ï¼
æ们å¯ä»¥ç¨elementä¸çç»ä»¶ç»å¶åºè¿æ ·ç页é¢ï¼
ç»å¶è¾å ¥å符串çææ¬æ¡ï¼
åçï¼æ们å¯ä»¥ç»å¶åºå å¯åçææ¬æ¡ï¼
form表åï¼
ä¸ææ¡ï¼éæ©å å¯çæ¹å¼ï¼
åéæ¡ï¼
æé®ï¼
å端æ们ç¨flaskåä¸ä¸ªæ¥å£ï¼è¿ä¸ªæ¥å£å°±æ¯ç¨æ¥å°å端è¾å ¥çå符串åéç»å å¯çå½æ°ï¼æ们éè¦å¼åä¸ä¸ªå°åï¼ä½¿ç¨POSTæ¹æ³ï¼å¹¶ä¸æ¥åä¼ éçåæ°ã
å¯å¨å端æå¡ï¼å³å¯è®¿é®å°ç½ç«ã
å°å¡ä¸æ»¡è¶³äºåªè½å å¯å符串ï¼æ¥ä¸æ¥ï¼å°å¡è¦æèå¦ä½å å¯Excelæ件ï¼
nuxtå ¥é¨æç¨ï¼ä¸ï¼vueå¦ä½å®ç°å ¨ç«éæåï¼ä¸ç¥éä½ æ没æåç°ï¼vueåçç½ç«é¤äºé¦é¡µä»¥å¤ï¼å ¶ä»é¡µé¢æ ¹æ¬å°±ä¸è½è¢«ç¾åº¦æ¶å½ã以è³äºæå¾å¤åseoçåäºçæ¥å ¶ç§ç§ä¸æ¯ï¼æå被强迫æ¹ä¸ºä¸å离å¼åã
è³äºvueç详æ 页为ä»ä¹ä¸è½è¢«ç¾åº¦æ¶å½ï¼è¿å°±æ¶åå°äºspaçæ ¸å¿æ¦å¿µï¼å 为æ°æ®é½æ¯å¼æ¥è·åæ¥çï¼åç«¯æ ¹æ¬å°±æ²¡ææè°ç纯éæä¸è¯´ãéä¿ç¹è®²å°±æ¯ï¼é¡µé¢é½æ¯jséè¿ajaxè·åå°æ°æ®ä»¥åï¼å¨æçæçãæ¢ç¶å®æ¬æ¥å°±æ²¡æä¸ä¸ªæ件æ¾å¨æå¡å¨ä¸ï¼å½ç¶ï¼ç¬è«ä¹å°±ä¸è½è·åå°è¿ä¸ªéæçurlå°åäºã
ä½æ¯urléæå°ååæ¯åseoå¿ é¡»çä¸è¥¿..
æ以ä»å¤©é¾å¥æä½ ä¸å¥æ°çå端æ¡æ¶ï¼åºäºvueçssrå端æ¡æ¶ânuxtãæ¬å°å¼åçæ¶åï¼ä½¿ç¨vueè¯æ³ï¼æ¨¡ååä½ ç项ç®ï¼ç¶ååå¸çæ¶åçæéæï¼æajaxè·åæ¥çå 容转åæéæhtml以å©äºseoãçæ£å®ç°æ¨¡åååéæå两ä¸è¯¯ï¼
é¦å 说æä¸ä¸ï¼é¾å¥æ¬å°çnuxtç¯å¢æ¯2.8.1ãå¦æä½ ççæ¬å·åæçä¸ç¬¦ï¼å¯è½æé¨åè¯æ³ä½ éè¦åèå®æ¹APIå¼åæåã
使ç¨å½ä»¤ï¼
å°ç¥è¯ï¼å¥æ¯npxï¼
æ们以åä¸æ¯ç¨çnpmåï¼ä½æ¯è¿è´§æ¯æ¬¡å®è£ ä¸è¥¿çæ¶åï¼ä½ è¿å¾ç»å ¨å±è£ ä¸ä¸ª-gï¼ç¸å½äºä½ çµèéèå¾æè¿ä¸ªæå¡ã
ä½å ¶å®ä½ 项ç®ä¸å·²ç»å å«äºè¿è¡æ¶åæéè¦å¾ææä¸è¥¿äºã
å¦æä½ ç¨äºnpxï¼ä»ä¸ä¼ç»ä½ è£ è¿ä¸ªä¸è¥¿ï¼èæ¯è£ å¾æ¶åç¨ä¸ä¸ï¼ç¨å®äºå°±å¸è½½ï¼æçæ´é«ã
npxæ¯nodejså¨5.0çæ¬ä»¥åæ°å å ¥çï¼é常çé¼ã
æ以æ们ç°å¨æ¥cnpm-gé£ä¸æ¥é½ä¸éè¦äºï¼æ们ç´æ¥npxå建项ç®å³å¯ï¼ï¼ï¼
ç´æ¥è¾å ¥
注æè¿éæå¯è½æ¥éï¼ä¸ç¨ç®¡ä»ï¼è¿ä¸ªå ç§å°±å®è£ 好äºã
è¿æä¸ä¸ªéè¦æ³¨æçå°æ¹ï¼ä½ çgitçæ¬ä¸è½ä½äº2.å¦ååé¢æå 个éè¦arrowéæ©å¾å°æ¹ä½ å¯è½éä¸äºï¼è¯·åçº§ä½ çgitçæ¬ã
ç¶åå°±å¯ä»¥å¼å§å®è£ äºã
çä½ çå°è¿ä¸ªçé¢ï¼å°±æ¯å®è£ 好äºã
ä»ä¼èªå¨å®è£ æéè¦å¾ææå ï¼å®è£ å®äºä»¥åä½ è¿å ¥localhost:
åºç°è¿ä¸ªçé¢ï¼å°±OKäº
Vue.jsè½åPC端å页å¼ç½ç«å¼ååå®å ¨å¯ä»¥ã
1ãå¦ä¸æ¹é¢ï¼Vueå®å ¨æè½å驱å¨éç¨åæ件ç»ä»¶åVueçæç³»ç»æ¯æçåºå¼åçå¤æå页åºç¨ï¼å®ç°PC端å页å¼çå端å¼åã
2ãPC端ç½ç«å¨ä¸éè¦ä¼å èèSEOåé¦å±æ¸²ææ¶é´æ¶ï¼å页å¼å¨ç¨æ·ä½éªåå¼åä½éª(å¼åæç)ä¸æ¯å®èå¤é¡µå¼çã
3ãvue.jsä½ä¸ºä¸»æµæ¡æ¶ä¹ä¸ï¼åæ ·æ¯æSSRï¼vue.jsçPC端ç½ç«å¼åæ¶æå¡ç«¯æ¸²æç¼è¯æ¯è¾æ ¢ï¼ä½¿ç¨ç¨å页å¼æçæ´é«ã
æ©å±èµæï¼
主æµæ¡æ¶Vue.jsä¸angularjsçå¼ååºå«ï¼
ä¸ãç¸åç¹ï¼
é½æ¯ææ令ï¼å ç½®æ令åèªå®ä¹æ令ã
é½æ¯æè¿æ»¤å¨ï¼å ç½®è¿æ»¤å¨åèªå®ä¹è¿æ»¤å¨ã
é½æ¯æååæ°æ®ç»å®ã
é½ä¸æ¯æä½ç«¯æµè§å¨ã
äºãä¸åç¹ï¼
1ãAngularJSçå¦ä¹ ææ¬é«ï¼æ¯å¦å¢å äºDependencyInjectionç¹æ§ï¼èVue.jsæ¬èº«æä¾çAPIé½æ¯è¾ç®åãç´è§ã
2ãå¨æ§è½ä¸ï¼AngularJSä¾èµå¯¹æ°æ®åèæ£æ¥ï¼æ以Watcherè¶å¤è¶æ ¢ã
3ãVue.js使ç¨åºäºä¾èµè¿½è¸ªçè§å¯å¹¶ä¸ä½¿ç¨å¼æ¥éåæ´æ°ãææçæ°æ®é½æ¯ç¬ç«è§¦åçã对äºåºå¤§çåºç¨æ¥è¯´ï¼è¿ä¸ªä¼åå·®å¼è¿æ¯æ¯è¾ææ¾çã
åèèµæï¼vue.jså®ç½-ä»ç»-Vue.js
Nuxt.js踩坑记,利用Nuxt一键生成多页面静态站点
本文介绍使用Nuxt.js创建多页面静态站点的方法,利用Nuxt.js的模板、路由配置、模块、插件和页面布局等功能,实现快速开发。
Nuxt.js是一个基于Vue.js的通用应用框架,它预设了服务端渲染应用所需的各种配置,简化了开发过程。
Nuxt.js提供了多种模板,包括starter-template、typescript-template、express-template等,用于快速创建项目。使用vue-cli可以轻松安装Nuxt.js,并生成项目结构。
项目配置方面,Nuxt.js默认配置覆盖了大部分使用情形,可以使用nuxt.config.js进行自定义设置,包括路由、模块、插件和页面布局等。
路由配置基于pages目录结构生成vue-router模块的路由配置,可以修改或添加新路由。Nuxt.js社区提供router-module等模块,实现更加个性化的自定义路由。
插件可以向Vue注入常用属性或方法,例如埋点插件用于统计PV页面浏览量。埋点插件通过plugins配置项实现,设置watch参数监听路由变化,确保每次页面进入或跳转时自动统计。
页面元信息可以通过head方法设置,避免重复的meta标签,使用hid键为每个meta标签赋予唯一标识。seo.config.js文件可以抽取公用的头部信息,与页面路由关联,实现个性化设置。
Nuxt.js中引入了layout概念,将页面划分为三层:layout、page和component,提供灵活的布局方案。指定布局可以使用页面文件中的layout属性,不指定时默认使用default布局。
状态管理方面,Nuxt.js支持vuex,无需额外配置,只需在项目根目录创建store文件夹。store支持普通方式和模块方式,实现状态树的划分。
一键静态化功能可以生成应用的静态目录和文件,方便部署。静态化时需注意资源版本更新问题,通过git控制上线,实现版本智能更新,避免文件名变动导致的git清理需求。
虽然在静态化编译时遇到一些问题,例如Nuxt.js和vue-server-renderer模块之间的兼容性问题,但可以通过修改源码或使用npm模块间接解决。
本文介绍了Nuxt.js的多个核心功能及其使用方法,旨在帮助开发者快速构建多页面静态站点。如有疑问或需要进一步了解,欢迎交流讨论。
nuxt.js + localStorage
在 Vue.js 开发中,localStorage 和 sessionStorage 提供了在浏览器中存储数据的能力。然而,当使用 nuxt.js 这样的服务端渲染框架时,直接使用 localStorage 将会遇到问题,因为 nuxt.js 期望的上下文与浏览器中的 localStorage 不兼容。为解决这一问题,可以采用三种策略:客户端初始化 Store、使用 cookie 或 nuxt-vuex-localStorage 插件。 选择 nuxt-vuex-localStorage 插件的原因有以下几点:服务端渲染不会受到任何影响。
提供了 localStorage 和 sessionStorage 的支持。
数据加密功能,确保了数据安全。
支持设置过期时间,方便数据管理。
操作简单,类似于常规的 Vuex 操作。
使用插件的关键步骤包括:初始化 Store 文件,用于本地存储数据。
在 modules 注册 Store 文件,确保每个页面可独立缓存。
处理数组或对象数据时,需创建副本以避免直接修改。
在对象外部保存数据,确保正确访问。
注意缓存生命周期,避免死循环。
在使用过程中,还需注意以下注意事项:在单文件组件中操作数组或对象需谨慎,避免引用类型错误。
理解数据存储与读取的顺序,确保 DOM 渲染的正确性。
在使用过程中遇到的问题,可以通过 GitHub issue 提出,获得官方解答。另外,使用尝试缓存(try-cache)机制,以应对浏览器本地存储功能关闭或隐身模式下可能出现的异常情况。深入研究插件的源代码,了解其具体实现方式,或在 GitHub 讨论区提问,能够获得最直接、有效的答案。在实际应用中,结合这些策略与注意事项,能够有效地在 nuxt.js 项目中利用 localStorage 提供的数据持久化能力。vue-template-compilerï¼
vueæä¹è§£å³
ä½ å¥½ï¼
æ¥éåå ï¼é常åºç°äºä¸äºä¾èµåºçæ´æ°æè å®è£ æ°çä¾èµåºä¹å(å¯ä»¥è®¤ä¸ºnpmupdateå·²ç»æ为ä¸ç§ä¹ æ¯)ï¼å¯¼è´äºvueåvue-template-compilerççæ¬ä¸ä¸è´ã
解å³æ¹æ¡ï¼ç»ä¸vueåvue-template-compilerççæ¬
1"vue":"2.3.4",
2"vue-template-compiler":"2.3.4",
ï¼æ³¨ï¼å¦ä¸æ示çæ¬å·åä¸ºæ ·ä¾ï¼å ·ä½å®ç°è¯·å°ä¼ä¼´ä»¬æ ¹æ®èªå·±ççæ¬å·å¯¹åºï¼
ç¶åæ§è¡ï¼npmupdateå°±å¯ä»¥äºã
éå ï¼
è¥ä¸è¿°æ¹æ³æªè§£å³é®é¢ï¼åå¯è½æ¯å 为åä¾èµåºä¹é´äº§çäºå²çªï¼è¿éæ们ä¹ææ´æ´åç解å³æ¹æ³ã
é¦å æ¥ç项ç®æ ¹ç®å½ä¸æ¯å¦çæè¿package-lock.jsonçæ件ï¼è¥æï¼å ä¹ã
ç¶åå é¤æ´ä¸ªnode_modulesç®å½ï¼éæ°é ç½®package.json(å½ç¶ï¼è¦è®°å¾ç»ä¸vueåvue-template-compilerççæ¬)
é 置好ä¹åéæ°æ§è¡ï¼npminstallï¼
OKï¼é®é¢è§£å³ã
element饿äºä¹çvueæ¡æ¶ï¼è¿è¡æ¥é已解å³ï¼Vue2.1.5å°_héå½å为_cï¼èElementç®ååççæ¬é½æ¯ç¨ä»¥åçcompilerç¼è¯çï¼å¯¼è´æ°çruntimeæ æ³è¿è¡Elementãç®åç解å³æ¹æ¡æ¯éå®Vueççæ¬ä¸º2.1.4
éå®vueç¸å ³çæ¬
#éæ°å®è£ ä¸ä¸çæ¬
"vue-template-compiler":"2.1.4"
"vue-loader":".0.0"
"vue":"2.1.4"
å ·ä½å½ä»¤å¦ä¸ï¼
npmremove#å¸è½½æ个çæ¬
npmremovevue
npmremovevue-template-compiler
npmremovevue-loader
npminstallvue@2.1.4#å®è£ æå®çæ¬
npminstallvue-template-compiler@2.1.4
npminstallvue-loader@.0.0
-æä¹è®©vueæå çæ¶åç¦ç¨angularç±äºæå å®æåï¼åéæ æ³ä½¿ç¨
æå°è¯è¿æ ·åï¼ä»¥åvue-cli3çåæ³ï¼é½æ æ³åå°ç¦ç¨ä¸¥æ ¼æ¨¡å¼
image.png
package.json
"devDependencies":{
"@vue/cli-plugin-babel":"~4.5.0",
"@vue/cli-plugin-eslint":"~4.5.0",
"@vue/cli-plugin-router":"~4.5.0",
"@vue/cli-plugin-vuex":"~4.5.0",
"@vue/cli-service":"~4.5.0",
"babel-eslint":"^.1.0",
"babel-plugin-transform-remove-console":"^6.9.4",
"copy-webpack-plugin":"^4.0.1",
"electron":"^9.0.0",
"electron-devtools-installer":"^3.1.0",
"eslint":"^6.7.2",
"eslint-plugin-vue":"^6.2.2",
"sass":"^1..5",
"sass-loader":"^8.0.2",
"svg-sprite-loader":"^6.0.",
"vue-cli-plugin-electron-builder":"~2.0.0",
"vue-template-compiler":"^2.6.",
"webpack-bundle-analyzer":"^3.9.0"
},
"eslintConfig":{
"globals":{
"__static":true
},
"root":true,
"env":{
"node":true
},
"extends":[
"plugin:vue/essential",
"eslint:recommended",
"plugin:vue/recommended"
],
"parserOptions":{
"parser":"babel-eslint"
},
"rules":{ }
}
å¯ä»¥ä½¿ç¨replace-in-fileå ¨å±æ¿æ¢æ"usestrict"å符串
ä¸¥æ ¼æ¨¡å¼ä¸éä¸¥æ ¼æ¨¡å¼
æå¨IEæµè§å¨ä¸,使ç¨strict模å¼.åç°,ä¸¥æ ¼æ¨¡å¼ä¸,ä¸å 许ä¸ä¸ªå±æ§å¤å¤å®ä¹çé误æ示,è¿ä¸ªæä¹è§£å³?
JavaScriptä¸¥æ ¼æ¨¡å¼
JavaScriptçä¸¥æ ¼æ¨¡å¼è¯¥æä¹ç解ï¼ä»å¤©çäºes6ï¼å讲å°ä¸¥æ ¼æ¨¡å¼ä½æä¸ç´ä¸ç解ï¼ä¸¥æ ¼æ¨¡å¼æ¯å¹²å¥ç(=_=)
vueä¸å¦ä½ç¦ç¨ES6ä¸¥æ ¼æ¨¡å¼ã
vue项ç®ä¸å¼ç¨å¤é¨çjsæ件ä¹åï¼æ¥éå¦ä¸ï¼è¯·é®æä¹è§£å³ï¼
nuxtæå å°ç¬¬ä¸æ¹å å离
å¦é¢ï¼å¨nuxt.config.jsä¸é ç½®äºvendoråï¼æå ååºç°äºapp.chunkhash.jsï¼common.chunkhash.js,manifest.chunkhash.jsä½æ¯ææ³å°é¡¹ç®ç¨å°ç第ä¸æ¹åºåç¬æå æä¸ä¸ªæ件ï¼å¦ä½¿ç¨äºvue,axios,vuex,element-uiï¼ææææå åæ¯vue.js,axios.js,vuex.js,element-ui.jsãå°è¯ä½¿ç¨äºCommonsChunkPlugin没ææå
pyinstaller第ä¸æ¹å æå é®é¢
pyinstalleræå æ¶æ¥é:raiseJSONDecodeError("Expectingvalue",s,err.value)fromNonejson.decoder.JSONDecodeError:Expectingvalue:line1column1(char0)
3k
webpackå¦ä½æå 第ä¸æ¹åºçèµæº?
æå¨åä¸ä¸ªæ®éçä¼ ç»é¡¹ç®ï¼ç±äºä½¿ç¨äºes并ä¸ä¸äºé¡µé¢ä¸çå°ç»ä»¶ä½¿ç¨äºreactï¼æå 项ç®ä¸ºäºçäºå¿å°±ä½¿ç¨äºwebpackãåæ¥åç°jqueryçä¸äºæ件ä¸ä½¿ç¨äºéæèµæº(å¦jquery.jBox,ztreeççè¿äºæ件é½æèªå·±çå¾çåcss)ï¼è¿äºèµæºè¯¥å¦ä½å¤çå¢ï¼
javascriptä¸¥æ ¼æ¨¡å¼æ¥é
jsä¸¥æ ¼æ¨¡å¼ä½¿ç¨è´¹ä¸¥æ ¼æ¨¡å¼ç代ç æ¥é'caller','callee',and'arguments'propertiesmaynotbeaccessedonstrictmodefunctionsortheargumentsobjectsforcallstothems
3åç2.6ké 读?已解å³
Webpackå¦ä½æå 第ä¸æ¹çuiæ¡æ¶ï¼
æè¿å¨çwebpackï¼äºè§£äºåºæ¬åçãå®è·µä¸ä¹å¨åç¹ä¸è¥¿ãæ³é®ä¸ï¼å¦ænpmåºä¸æ²¡æçjsåºï¼éè¾¹æå¾çï¼æcssï¼æèªå·±çç®å½ç»æï¼è¯¥å¦ä½å¼ç¨è¿ç±»åºå°èªå·±ç项ç®ä¸å¢ï¼
2.8k
èªé¡¶åä¸å¦Reactæºç
ä»ç念å°æ¶æå°å®ç°å°ä»£ç ï¼éå½»ç解
å端æ§è½ä¼å设计é®
å端æ§è½ä¼å,é¢è¯çå¿ é®é¢ç®
vueè¿è¡æ¥éepf-fast@1.0.4devçæ¬ä¸ä¸è´ãvueçæ¬åvue-template-compilerçæ¬ä¸ä¸è´å°±ä¼åºç°è¿è¡æ¥éepf-fast@1.0.4devã解å³æ¹æ³ï¼
1ãå°node_modulesæ件夹å å é¤ã
2ãå°package.jsonæ件çVueçæ¬å·åvue-template-compilerçæ¬å·æ¹ä¸ºä¸è´ï¼2.6.7ï¼ï¼éé«ççæ¬ï¼éæ°è¿è¡npmrundevå³å¯ã