Nuxt.js

之前笔者分享了如何在Nuxt3中应用Element Plus UI，但那是PC端的UI组件库，不适用于做挪动端页面。做挪动端比拟支流的UI库就是Vant UI了。接下来咱们讲讲如何在Nuxt3中应用VantUI。 引入Vant UI先装置Vant # 能够抉择一个你喜爱的包管理器npm/yarn/pnpmpnpm install vant装置Nuxt官网专门针对引入vant 开发的模块 # 抉择适合的包管理器，npm/yarn/pnpmpnpm i @vant/nuxt -D在nuxt.config.ts中配置modules参数export default defineNuxtConfig({ modules: [ '@vant/nuxt' ], vant: { /** Options */ }})至此，曾经引入胜利，且所有Vant 组件也都能够间接主动导入。示例： <template> <van-button type="primary" @click="showToast('toast')">button</van-button> <VanButton type="success" @click="showNotify('notify')">button</VanButton> <LazyVanButton type="default">lazy button</LazyVanButton></template>记住：Vant组件曾经能够被主动导入，而且也包含主动导入showDialog、showToast等办法，所以咱们不必再手动书写import了。 挪动端适配其实在Vant UI官网文档中有讲到如何做挪动端的单位适配，须要借助postcss插件实现。其中，讲到了两种适配形式，一种是将px单位转换为vw。一种是将px单位转换为rem vw单位适配计划rem单位适配计划那咱们该应用哪种计划呢？其实笔者更偏向于应用rem计划，因为rem的兼容性更好，然而用rem的话，须要用到lib-flexble库去依据媒体查问动静的调整html的font-size，略显麻烦，所以，笔者打算将两者联合。 开发的时候书写px单位，而后通过插件将px单位换算成rem；将html的font-size设置为vw单位，这样根元素font-size就能主动依据视口宽度动态变化；具体的实现形式如下： 装置postcss-pxtorem pnpm i -D postcss-pxtorem在nuxt.config.ts中配置postcss参数。笔者是以750px的尺寸做为设计稿参考值，定1rem=100px，这样换算不便。 export default defineNuxtConfig({ // ...other setting postcss: { plugins: { 'postcss-pxtorem': { rootValue({ file }: any) { return file.indexOf('vant') !== -1 ? 37.5 : 100 }, propList: ['*'], exclude: /(node_module)/, selectorBlackList: ['html', '.rem-ignore'] } } },})在app.vue或者其余全局的css文件中增加以下css。 ...

Nuxt框架因为做了一些封装解决，曾经将入口文件齐全暗藏了，因而对于一些老手小白来说，怎么在Nuxt中引入一些第三方库就成了个麻烦事。ElementPlus UI 自身反对服务端渲染，本文将次要概述如何在Nuxt3中集成ElementPlus。 如何引入？1.先装置Element Plus # 抉择一个你喜爱的包管理器# NPM$ npm install element-plus --save# Yarn$ yarn add element-plus# pnpm$ pnpm install element-plus2.装置Nuxt官网专门针对引入Element Plus 开发的模块 # 抉择适合的包管理器，npm/yarn/pnpmpnpm i @element-plus/nuxt -D3.在nuxt.config.ts中配置modules参数 export default defineNuxtConfig({ modules: [ '@element-plus/nuxt' ], elementPlus: { /** Options */ }})至此，曾经引入胜利，且所有Element Plus 组件也都能够间接主动导入。 应用进阶1. 如何做全局配置@element-plus/nuxt 中提供了一些配置参数，咱们只须要在nuxt.config.ts中定义elementPlus参数即可，比方配置主题 export default defineNuxtConfig({ modules: [ '@element-plus/nuxt' ], elementPlus: { themes: ['dart'] }})所有的配置参数能够点击查看官网文档 2.如何全局引入element ui 图标？Element Plus UI 的图标并未在nuxt3中做主动导入，所以应用的时候，须要手动从@element-plus/icons-vue中导入, 如下： <script lang="ts" setup>import { Document } from '@element-plus/icons-vue'</script><template> <el-icon><Document /></el-icon></template>然而如果咱们很多中央都要用到图标，且有时候须要应用动静引入的时候，这样手动import就比拟麻烦了，那么如何全局引入图标呢？在Nuxt3中，咱们能够创立一个plugin来实现。笔者的做法是在plugins目录中创立一个global.ts文件，用于全局引入一些组件。 ...

应用npm run build时报了这个谬误：Assertion failed: (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134.error Command failed with signal "SIGABRT".我编译的是一个nuxt.js的我的项目，这个我的项目有个依赖 "fibers": "^5.0.0", 下面的谬误呈现起因是因为node-fibers在 nodejs >=16.x 的版本曾经被弃用了。 查看本地node版本 node/16.16.0 果然是这个问题。 切换至低于16的版本，npm run build 失常。

问题如图运行nuxt我的项目的时候提醒找不到模块,然而模块文件中有,求解

问题：nuxt 我的项目本地启动 npm run dev，本地localhost多开几个标签页，会呈现卡死或始终转圈的状况，如果敞开其中一个tab标签，卡死的tab标签页就会立刻加载实现，控制台看不到任何错误信息。   问题剖析：浏览器对同一个主机有连接数限度。  解决办法：（1）Chrome浏览器目前是没有解决办法的；（2）Firefox浏览器能够批改，在浏览器输出 about:config，在文本框输出 network.http.max-persistent-connections-per-server，默认最大连接数是6，比方改成60保留。测试OK    参考起源：https://github.com/nuxt/nuxt.js/issues/8190

1，配置1.1，在plugin 下创立 userAuth文件 export default (context) => { if(process.client){ const token = sessionStorage.getItem('token'); context.app.router.beforeEach( (to, from, next) => { if( !token && to.path !== '/login' ){ next('/login'); }else if(to.path !== '/login'){ next(); }else { next(); } }) }};留神1）路由以后门路和跳转门路不要反复，不然会呈现 死循环，超出堆栈问题。Maximum call stack size exceeded。2）莫名其妙呈现的如下报错，然而清理缓存之后就隐没了。[SSE] Connecting to /_loading/sse...3）process.client 是判断以后是处于服务端，还是客户端。因为，sessionStorage 是window 对象，在服务端获取不到。 2，调用在nuxt.config.js中调用 plugins: [ '@/plugins/userAuth' ],另外：应用中间件进行路由拦挡应用中间件会有一个问题，间接如输出指标地址，例如：https://192.1.1.1/home会胜利进入，只有跳转到别的地址的时候，才会拦挡，跳转登录页。所以，并不举荐应用 export default function ({ route, redirect }) { if (process.client) { const token = sessionStorage.getItem('token'); if (!token && route.path !== '/login') { redirect('/login'); } }}参考：nuxt中的process.static/process.server/process.client ...

这里介绍一个纯前端导出的插件 file-saver。通过这个插件，能够导出 txt ， 导出 canvas的 png 图片。GihHub地址：FileSaver.js 1，装置npm install file-saver --savebower install file-saveryarn add file-saver2，应用2.1 在plugins/file-save.js 创立全局办法。 import { saveAs } from "file-saver";export default (ctx, inject) => { inject("saveAs", saveAs);};2.2 在具体方法里调用 saveFile(){ let textContent = ""; for (let i = 0; i < 10; i++) { textContent += `你好${i + 1} \r\n`; } const blob = new Blob([textContent], { type: "application/json" }); this.$saveAs(blob, '导出.txt'); },导出后果 祝大家新年快乐~~

简略介绍一下，在nuxt里 援用 vue-markdown 组件。 组件Git 地址：https://github.com/miaolz123/... 1，装置NPM $ npm install --save vue-markdownYarn $ yarn add vue-markdown --save2，应用2.1，新建 vue-markdown 文件 在 plugins 下，新建 vueMarkdown 文件，引入装置的组件 import Vue from 'vue';import VueMarkdown from 'vue-markdown';Vue.component("VueMarkdown", VueMarkdown);2.2， 在nuxt.config.js 里调用 vueMarkdown 文件 plugins: [ '~/plugins/vueMarkdown' ],2.3，在须要的页面调用 <template> <div> <el-input v-model="source" type="textarea"></el-input> <vue-markdown id="markdown" :source="source"></vue-markdown> </div></template>成果如下图所示：在文本域里编写 markdown 格局的文本，组件就会主动解析并进行展现。如果，想要批改其中的款式，须要定位具体的地位。我是采纳 /deep/ 的形式进行定位。 #markdown /deep/ p { color: rgb(17, 180, 139)}

当咱们须要对一些 结构复杂，或内容较多的JSON 进行批改配置的时候，极易容易出错。于是，就想着是否能通过表单模式进行批改，保留。最初，发现了几个JSON 编辑器。1，Vue JSON Schema Form 2，Vue-Json-Edit 3，json-editor 这里采纳的是，第一个 Vue JSON Schema Form 插件。上面，就介绍一下，在nuxt 中，如何应用。 1，装置该命令是 装置 vue2 + elementUI 版本的。其余版本的装置命令能够查阅官网。npm install --save @lljj/vue-json-schema-form 2，应用2.1 在 plugins 下新增 json-schema.js 文件，调用组件 import Vue from "vue";import VueForm from "@lljj/vue-json-schema-form";Vue.component("VueForm", VueForm);2.2，在所需的中央，应用 VueForm 组件 <template> <div> <VueForm v-model="formData" :schema="config.schema" :form-props="{ layoutColumn: 2, }" @on-submit="handlerSubmit" @on-cancel="handleCancel" > </VueForm> </div></template><script>import config from "@/config/config_form_schema";export default { data() { return { config, formData: {}, }; }, methods: { handleCancel(){ // 勾销操作。 }, handlerSubmit() { // 提交操作。 console.log('formData后果：',this.formData) }, },};</script>当须要解决简单JSON文件时，能够采纳导入的形式，赋值给schema schema 的格局编写，可参考：配置 schema 和 JSON Schema 标准 ...

之前的文章有讲到 nuxt 封装API，并进行简略的调用。在理论的开发中，接口会越来越多，如果持续放到一个文件下，就会拥挤不堪，所以，能够依据功能模块，将接口拆分一下，在api 文件里别离引入不同功能模块的申请地址。具体操作如下: 1，创立API文件1，在我的项目根目录下，创立一个API文件 |--src|--api |--module1.js |--module2.js2，编写 module1.js 文件 export default ($axios) => ({ get() { return $axios.$get("/v1/XXX") }, put(data) { return $axios.$put("/v1/XXX",data) }, . . .})2，批改plugins/api.js 文件// 数据接口import module1Repository from "../api/module1"import module2Repository from "../api/module2"export default function ({ app, $axios, error }, inject) { const API = {} const api = $axios.create({ baseURL: process.env.BASE_URL, // url = base url + request url timeout: 5000, // request timeout }) // 设置response 拦挡 // api.interceptors.response.use( // // 接口谬误状态解决，也就是说无响应时的解决 // // response => { // // // 拦挡响应，做对立解决 // // if (response.status) { // // switch (response.status) { // // case 409: console.log('呜呜呜呜'); break; // // } // // } // // return response // // }, // error => { // console.log('哎呀，粗错啦', error.response) // // 返回接口返回的错误信息 // return Promise.reject(error) // } // ) API.module1API = module1Repository(api) API.module2API = module2Repository(api) app.api = API inject("api", API)}3，应用1，在 asyncData 中应用 ...

json-server是一款基于Node.js的服务器，为前端开发人员能够提供一个高仿真的RESTFul后盾服务（数据原型），最让人欢喜的是，整个服务的搭建过程不须要编写任何代码，最快只须要1分钟。配合上mock ，就能够随机生成后端数据了。 1，装置npm install -g json-serve原本是打算应用 yarn add -g json-server 或 yarn add json-server 装置，但最初都不能失常应用。于是采纳了npm 装置。 2，应用2.1 编写数据文件。为了测试临时先将数据存到了 src/static/jsonData/mockTest.js // 用mockjs模仿生成数据const Mock = require('mockjs');module.exports = () => { // 应用 Mock const data = Mock.mock({ "list|10": [ { "id|+1": 1, email: "@EMAIL", }, ], }); // 返回的data会作为json-server的数据 return data;};应用mock 随机生成10个数据。 2.2 启动json-server 服务留神：须要进入到数据文件的层级，执行以下命令 json-server --watch --host 0.0.0.0 --port 3001 mockTest.js设置 --host 0.0.0.0 就能够应用本机IP拜访。如下图所示，示意，启动胜利。通过本机IP就能够拜访数据了 至此，就能够像失常接管API 一样，在前端接收数据了。

这里简略介绍一下，nuxt 下mock + axios 的装置、应用。 mock可能生成随机数据，拦挡 Ajax 申请。对于纯前端来说，mock 配合express，就能够本人搭建后盾了。也能够参考一下 vue-element-admin 对于mock 的应用，以及一些大佬踩过的坑。 mock1，装置npm install mockjs 2，增加mock 代码// plugins/mock.jsimport Mock from "mockjs"Mock.mock(/user\.json/, { "list|1-10": [ { "id|+1": 1, email: "@EMAIL", }, ],})3，nuxt.config.js配置 plugins: [ '@/plugins/mock' ],4，mock数据调用 methods: { async getTempGameList() { const mockData = await this.$axios.$get("user.json") console.log("mockData", mockData) },}数据后果： 留神：mock的申请数据无奈在nuxt 提供的 asyncData 里调用。这里是在 methods 里调用的。 @nuxtjs/axios对于 @nuxtjs/axios 的装置，详见之前的文章：nuxt---axios封装+环境变量配置 在获取数据的时候呈现如下问题： TypeError: request.upload.addEventListener is not a function网上说：导致这一问题的根本原因是 Mockjs 中, 封装了原生的 XMLHttpRequest 为 MockXMLHttpRequest.解决思路是, 把原生 XMLHttpRequest 的 upload 属性赋给 MockXMLHttpRequest 的原型对象.在 node_modules/mockjs/dist/mock.js 退出以下代码 ...

这篇文章整顿一下，nuxt中 pages/layout/components/plugins 的相干应用 。之前曾经手上应用过了，这次具体的看一下官网文档，加深了解。目录构造 |--src |--components ---编写重复使用组件。 |--layout ---编写全局款式。 |--pages ---编写具体页面。 |--plugins ---编写须要的插件。components该components目录蕴含您的 Vue.js 组件。组件形成了页面的不同局部，能够重复使用并导入到页面、布局甚至其余组件中。通过在 nuxt.config.js 文件中进行如下配置，能够间接应用组件，无需导入 export default { components: true}|-- components/ |-- TheHeader.vue |-- TheFooter.vue<template> <div> <TheHeader /> <Nuxt /> <TheFooter /> </div></template>援用时，须要与文件名雷同。当components 层级较多时的援用办法： |--components |--base |--foo |--CustomButton.vue组件名称将基于其本人的门路目录和文件名。因而，该组件将是 <BaseFooCustomButton />获取数据components 获取数据的形式是： Nuxt中的 fetch() 。无奈应用asyncData，因为asyncData办法会在组件（限于页面组件）每次加载之前被调用。 <script> export default { async fetch({ store, params }) { let { data } = await axios.get('http://my-api/stars') store.commit('setStars', data) } }</script>留神：无奈在外部应用this获取组件实例，fetch是在组件初始化之前被调用 layout编写全局布局，例如，侧边栏，导航栏。 |-- layout |-- default.vuedefault.vue 文件，会默认利用到所有未指定布局的页面。援用导航栏，页脚组件： ...

上篇有讲到国际化的根本配置，并不是很全，这篇讲一下，国际化切换的路由变动状况。 正确应用：1.文件构造： |--pages |--textA |--_lang |--_text |--index.vue2.nuxt-link 应用 <nuxt-link :to="{ name: 'textA-lang-text', params: { lang: $store.state.locale ,text: '111'} }" class="uk-link-reset"></nuxt-link>$store.state.locale 获取store存储的语言记录产生的路由：localhost:3000/textA/en/111 其余状况1，当_lang文件在最里面，且有可间接承受参数的文件。 |--pages |--_lang |--index.vue |--_textA |--index.vue |--index.vue<nuxt-link :to="{ name: 'lang-textA', params: { lang: $store.state.locale ,textA: '111'} }" class="uk-link-reset"></nuxt-link>看一下，具体的路由变动 app.i18n.path = (link) => { if (app.i18n.locale === app.i18n.fallbackLocale) { return `/${link}` } return `/${app.i18n.locale}/${link}` }当切换到默认语言时，预计路由后果：http://192.168.XX.XXX:3000/111 (_lang下的index文件)理论路由后果：http://192.168.XX.XXX:3000/111 (_textA下的index文件)当抉择默认语言时，路由挂载的参数，第一个lang 会被省略，不会进入_lang 文件，第二个参数会匹配pages下承受参数的文件，也就是_textA 文件。 2，当_lang文件在最里面，且无承受参数的文件。 |--pages |--_lang |--index.vue |--textB |--index.vue |--index.vue、当切换到默认语言时，预计路由后果：http://192.168.XX.XXX:3000/111 (_lang下的index文件)理论路由后果：no found当抉择默认语言时，路由挂载的参数，第一个lang 会被省略，不会进入_lang 文件，第二个参数会匹配pages下承受参数的文件，然而目前没有承受参数的文件，也没有参数同名的 111 这个文件，所以间接报错。 ...

因为我的项目须要，在这里记录一下对于nuxt 国际化应用，并增加 刷新页面语言不重置性能。参考nuxt 官网提供的国际化利用：nuxt 官网参考代码 1，文件构造|--locales ------寄存不同语言的json 文件。 |--en.json |--fr.json|--middleware ------nuxt 的中间件，解决路由 |--i18n.js|--pages ------具体页面，国际化的页面须要在_lang 下，例如：pages/en/about |--_lang |--about.vue|--plugins ------实现语言切换的中央。 |--i18n.js|--store ------应用vuex 存储。 |--i18n.jsjs|--nuxt.config.js ------国际化相干配置2，装置npm install vue-i18n --save3，应用3.1 调用，初始渲染国际化的内容要蕴含在 { { $t( ) } } 里 <h1 class="titleFont">select you language</h1> {{ $t('links.about') }}links.about 是语言的json 文件里的字段内容。初始渲染为 app.i18n.fallbackLocale 的值。app.i18n.fallbackLocale 在 plugins-i18n.js 里配置。 3.2，语言切换HTML <div class="languageInfo" @click="changeLanguage('zh')"> <img src="../assets/img/language/China.png" alt="" width="35px" height="35px"> <span class="languageFont">简体中文</span></div>js changeLanguage(language){ this.$i18n.locale = language; Cookies.set('lang', language);}具体实现切换的办法是， this.$i18n.locale = language;通过 cookie 保留 已抉择的语言。因为，在切换语言，并手动刷新页面之后，语言会重置为默认值。无奈记录以后抉择的语言。所以要进行本地保留。不应用 localStorage 的起因是，在plugins---i18n.js里调用 localStorage.getItem() 时会呈现 'localStorage' is not defined 的问题。在SSR中，created生命周期在服务端执行，node环境中没有localStorage所以会报错，将须要应用localStorage的代码放到浏览器应用的生命周期(mounted)中。 ...

1，批改package.json{ "name": "ii222", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt build && nuxt start", "generate": "nuxt generate" }, // 以下省略}2进入到我的项目目录执行如下命令pm2 start ./node_modules/nuxt/bin/nuxt.js罕用的PM2命令pm2 list # 列表 PM2 启动的所有的应用程序pm2 stop 0 # 进行 id为 0的指定应用程序pm2 restart 0 # 重启id为0 的应用程序pm2 delete 0 # 删除指定利用 id 0pm2 start app.js # 启动app.js应用程序pm2 start app.js --name="demo" # 启动应用程序并命名为 "demo"pm2 start app.js --watch # 当文件变动时主动重启利用pm2 start script.sh # 启动 bash 脚本pm2 show [app-name] # 显示应用程序的所有信息pm2 logs # 显示所有应用程序的日志pm2 logs [app-name] # 显示指定应用程序的日志pm2 stop all # 进行所有的应用程序pm2 restart all # 重启所有利用pm2 delete all # 敞开并删除所有利用pm2 startup # 创立开机自启动命令pm2 save # 保留以后利用列表

1、前提当咱们在应用nuxt ssr部署上线的时候，如果在asyncData也就是服务端申请的办法中呈现报错，那么会导致线上环境呈现server error的报错页面。对于普通用户来说体验感极差，不利于我的项目的稳定性。 2、如何解决？这个能够分为两局部： 1、从代码方面动手上线前严格测试代码的可行性。确保十拿九稳，尤其是接口返回的冗余、业务逻辑的解决、代码书写的正确性、返回值是否存在等等。 2、扭转Server error 报错页面交互。默认的页面报错给人的感觉就是服务不可用，让用户有一种不信赖的感觉。潜在的危险就是导致用户的散失。所以能够以一种敌对的交互方式，让用户看到报错不在那么着急。 3、实现形式Nuxt官网提供了简略的解决办法。在asyncData中如果呈现谬误抛出的话就会跳转到指定页面。然而此办法只实用于前端报错，如果是服务端呈现谬误还是会呈现Server error。 所以有了本文的办法 1、在Pages的同级目录下建一个app的文件夹，在app中新建views文件夹。2、在views中创立一个error.html用来显示呈现Server error报错后的展现。 3、html的款式能够依据网站理论状况让UI做一个特定状况的展现页。 那么下次在呈现Server error的时候，浏览器就不是显示一个零碎报错，而是显示本人设定的指定页面。

nuxt 我的项目启动，执行npm run dev 报错 Error: getaddrinfo ENOTFOUND 0 起因： nuxt.config.js 中 serve 配置项 host，把 '0' 换成 '0.0.0' server: { // host: '0', // 这种写法 mac上没问题，windows会报错 host: '0.0.0.0', // 改成这种写法就好了 timing: false },再次启动，胜利

问题我忽然发现，网站刷新的时候打不开了，如果是路由跳转进去，是失常的 然而网站经常链接会被他人珍藏，或者间接分享关上，间接打不开必定不好 问题剖析：此网站我是采纳的nuxt.js开发的，个别这种谬误类型，通过网络申请的数据，而后在对象下的某属性失落，造成谬误类型排查通过查看，是在父级页面申请的数据，传到子组件数据失落 page.js 页面<template> <div class="aritcle-detail"> <Header /> <div class="wp clearfix"> <Detail :detail="detail"></Detail> </div> <Footer /> </div></template><script>import { apiNavthemeDetail } from '@/api/navtheme'import Detail from '@/web/article/Detail'export default { components:{ Detail }, async asyncData({ $axios, app, store, params,route }) { console.log('router',params.id); const res = await apiNavthemeDetail({ id: params.id }); return { detail: res.data, params } }, mounted() { setTimeout(() => { console.log('params', this.params) console.log('detail', this.detail) }, 3000) }}</script>Detail子组件<template> <div class="detail"> <div class="detail-left"> <div class="info"> <div class="header"> <h1>{{detail.title}}</h1> <div class="meta"> <span> {{detail.member.it_name}}次 </span> </div> </div> <div class="user"> <div class="user-left"> <div class="img"> <img :src="detail.member.userhead" alt /> </div> <div class="name"> <b>{{detail.member.username}}</b> <span class="user-title">{{detail.member.description}}</span> </div> </div> </div> <div class="content article-md"> <no-ssr> <mavon-editor class="detail-md itnavs-markdown" :value="detail['content']" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :editable="false" /> </no-ssr> </div> </div> <div class="community"> <img src="@/assets/images/qzdh.jpg" alt /> </div> </div> </div></template><script>import Rightuser from './Rightuser'import Casually from './Casually'export default { components: { Rightuser, Casually }, props: ['detail'],}</script>查看服务器日志nuxt.js 是node过程，启动的是用pm2，如有不懂，清查看我之前写的【文章】 ...

常识脉络 Nuxt.js 根底简介Nuxt.js 是一个基于 Vue.js 的第三方开源服务端渲染利用框架它能够帮咱们轻松的实现同构利用通过对客户端 / 服务端基础架构的形象组织，Nuxt.js 次要关注的是利用的 UI 渲染咱们的指标是创立一个灵便的利用框架，你能够基于它初始化新我的项目的根底构造代码，或者在已有 Node.js 我的项目中应用 Nuxt.jsNuxt.js 预设了利用 Vue.js 开发服务端渲染的利用所须要的各种配置，相似于脚手架生成了我的项目的根本框架提供了一种命令叫： nuxt generate ，为基于 Vue.js 的利用提供生成对应的动态站 点的性能，是向开发集成各种微服务（Microservices）的 Web 利用迈开的新一 步作为框架，Nuxt.js 为 客户端 / 服务端 这种典型的利用架构模式提供了许多有用的个性，例如异步数据 加载、中间件反对、布局反对等十分实用的性能 Nuxt 框架是如何运作的Nuxt.js 集成了以下组件 / 框架，用于开发残缺而弱小的 Web 利用： Vue.jsVue RouterVuexVue Server Renderer压缩并 gzip 后，总代码大小为：57kb （如果应用了 Vuex 个性的话为 60kb）。 另外，Nuxt.js 应用 Webpack 和 vue-loader 、 babel-loader 来解决代码的自动化构建工作（如打包、代码分层、压缩等等）。 NuxtJS 个性基于 Vue.jsVue、Vue Router、Vuex、Vue SSR 主动代码分层服务端渲染弱小的路由性能，反对异步数据动态文件服务ES2015+ 语法反对打包和压缩 JS 和 CSSHTML 头部标签治理本地开发反对热加载集成 ESLint反对各种款式预处理器： SASS、LESS、 Stylus 等等反对 HTTP/2 推送 ...

1.nuxt generate打包，动静路由不合适用这种形式打包，应该用npm run build2.filter格式化工夫：replaceAll报没有此办法，replace能够3.vue 播放视频: :src不起作用，须要this.$refs.videoDeRef.src = this.nowItem.videoUrl动静设置门路,this.$refs.videoDeRef.play()动静触发播放视频4.window.abc、Vue.prototype.abc,全局变量

1.应用swiper:因为我的项目须要自动播放，swiper6自动播放始终有效，后发现须要改成swiper5。版本别离为："swiper": "^5.4.5","vue-awesome-swiper": "^4.1.1"。nuxt.config.js:nuxt-swiper-plugin.js:配置属性：2.要实现的双向联动成果，点击左侧滑动到对应地位，滑动到某个地位，左侧对应模块选中：遇到的问题：始终为0。通过这种形式：获取的值也为0。后发现：这种形式能够获取到值，然而在mounted中能够获取到，后续获取也始终为0。实现代码： handleScroll() { // 滑动监听 let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量 let scrollTop = top - this.topSet if (scrollTop >= this.topList[0] && scrollTop < this.topList[1]) { this.navIndex = 0 } else if (scrollTop >= this.topList[1] && scrollTop < this.topList[2]) { this.navIndex = 1 } else if (scrollTop >= this.topList[2]) { this.navIndex = 2 } else if (scrollTop < this.topList[0]) { this.navIndex = -1 } if (top > 50) { this.tellSign = true } else { this.tellSign = false }},jumpPage(index) { let PageId = this.topList[index]; window.scrollTo({ 'top': PageId, 'behavior': 'smooth' })},

1.app.vue中的router-view,能够通过layout文件夹下的default.vue中<nuxt/>标签替换，default.vue页面能够写一些界面独特款式。2.layout文件夹下的error.vue能够写找不到对应页面时的提醒内容以及逻辑3.本次我用less写的css款式，后期没有增加layout文件夹上面的内容，单纯的把所有的页面写完了，通过浏览器勾掉或者增加款式时，款式就崩掉(即该div会失去增加的className，勾掉从新勾选或者增加而后删除复原成原样也不起作用，从新刷新又会有该className)，后续将对应布局抽取放入default.vue中，调试就不再呈现这种状况，临时还未找到起因4.想在default.vue中监听路由变动，必须加immediate: true能力监听到，否则不触发办法

小记 环境 nuxt.js + typescript + ant-design-vue文章分类：next入门、nuxt如何应用class语法、vue2+ts开发nuxt我的项目 文件1：pages/expriment.vue <template> <div> hello World ! <nzDemandLayer /> </div></template><script lang="ts">import { Component, Vue, State, Action, } from "nuxt-property-decorator";import { DatePicker } from "ant-design-vue";import nzHeader from "~/components/nz-header";import nzDemandLayer from "~/components/nz-demand-layer";@Component({ components: { nzDemandLayer, nzHeader },})export default class Expriment extends Vue { onChange(date:any, dateString:any) { console.log(date, dateString); }}</script>文件2：components/nz-header.vue   <template> <div id="topaaa"> header </div></template><script lang="ts">import { Component, Vue, State, Action, } from "nuxt-property-decorator";export default class Header extends Vue {}</script><style> @import './navigation.css';</style>能够看到，我只是在 expriment 页面里注册了组件就导致了 ant-design 的DatePicker组件不可用。 ...

1、我的项目简介Nuxt.js是目前比拟热门的服务端渲染SSR框架。凭借其更好的SEO、更快的内容达到工夫(*首屏渲染速度快*) 加之基于Vue.js技术开发，更易于上手，取得了很多技术开发者的青眼。nuxt_chatroom我的项目是基于nuxt+vue+vuex+vant等技术开发的仿微信|Tinder界面聊天实例。实现了卡片式翻动、音讯发送/表情gif、图片/视频预览、红包/朋友圈等性能。 成果片段啧啧，成果还能够吧，上面就来解说下实现过程。 2、技术框架应用技术：nuxt.js+vue.js+vuexUI组件库：vant-ui (有赞挪动端vue.js组件库)字体图标：阿里iconfont图标库弹窗组件：vpopup（基于vue自定义弹框）本地存储：cookie-universal-nuxt: ^2.1.4 大家如果对Nuxt.js不相熟的话，能够先去官网看看材料。其实只有你会vue，上手就非常简单的。https://zh.nuxtjs.org/https://github.com/nuxt/nuxt.js 3、我的项目目录构造想理解更多Nuxt.js目录构造及应用阐明，能够去参看上面链接。https://zh.nuxtjs.org/guide/d... 4、对于自定义组件我的项目中 顶部Navbar、Tabbar及弹窗 均是自定义组件实现的，这里不作过多解说，感兴趣的能够去看看上面的分享文章。Nuxt/Vue仿咸鱼Tabbar凸起成果|vue自定义导航栏Vue自定义弹框组件|仿android/ios弹窗成果 5、仿Tinder|探探卡牌翻动遇见页面原型参考了社交App探探的卡片滑动成果。整体分为 顶部导航、滑动区、底部标签栏 等三个局部。这里不过多介绍，感兴趣的能够去看上面的这篇分享文章。Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder 6、nuxt默认布局nuxt我的项目中，layouts目录下的default.vue页面为默认的布局页面。 <!-- 布局模板 --><template> <div class="nuxt__container flexbox flex-col"> <header-bar /> <div class="nuxt__scrollview scrolling flex1"><nuxt /></div> <tab-bar /> </div></template>留神：在nuxt我的项目中是通过<nuxt />来显示主体内容的，而vue中则是应用<router-view />。 nuxt.config.js配置文件nuxt.js的默认配置文件，能够配置 meta、路由信息、css/js及插件引入、webpack等配置。https://zh.nuxtjs.org/guide/configuration/ export default { // 端口配置（可选） server: { port: 3000, host: '192.168.122.100' }, /* ** 页面头部meta信息配置 */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' }, { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'}, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' }, ], script: [ { src: '/js/fontSize.js' }, { src: '/js/wcPop/wcPop.js' }, ] }, /* ** 全局css配置 */ css: [ '~/assets/css/reset.css', '~/assets/css/layout.css', '~/assets/fonts/iconfont.css', ], /* ** 全局插件列表 */ plugins: [ '~/plugins/vue-global.js', // 通过这种形式引入本地js也能够（需设置ssr:false） // {src: '~/assets/js/fontSize.js', ssr: false} ], // ...}nuxt.config.js中的meta是全局配置的，如果独自页面配置，参考如下： ...

性能概述我的项目应用前后的拆散的开发模式，后端应用Spring Security实现基于Jwt的用户认证模式，数据交互应用Json格局。前端应用Nuxt框架实现服务端渲染（SSR）性能，应用Vuex实现登录状态存储，应用@nuxtjs/axios插件加载数据。用户登录后就会始终处于登录状态，除非用户被动登出或间断7天未拜访网站才会要求从新登录。 后端大体流程用户通过浏览器输出账号密码进行登录后盾java程序认证胜利后通过Http Header 返回 accessToken、refreshToken、tokenRefreshed(boolean)accessToken 有效期2小时，次要用于拜访须要认证受权的接口（如果有效期太长，有期限其用户权限等信息发生变化后无奈及时反映到token中）refreshToken 有效期7天，其惟一的作用就是再accessToken过期后，用户能够在不必从新登录的状况下换取新的accessTokentookenRefreshed 告知客户端Token是否已刷新，如果为true客户端必须存储新的Token后盾每次收到Jwt的认证申请时都会判断accessToken是否快过期（此时的accessToken还未过期，还是无效的，如果过期了就会发送认证失败的Response给客户端）。如果快过期了，将主动创立新的accessToken、refreshToken放入Http Header中，随本次申请的后果一起返回给客户端前端计划在介绍前端计划前，先简略说下用户拜访须要权限认证的两种不同状况： 1、用户间接在浏览器地址栏中输出链接或点击一个一般 <a> 标签的链接。2、用户点击<nuxt-link>形式构建的链接 第一种状况的 Http 申请由浏览器主动构建，首先发送到部署Nuxt的Node服务器上（SSR的Server端），而后再Server端构建Nuxt及Vuex相干对象，此时是获取不到保留再客户端（浏览器）中Token信息的。浏览器在未收到响应之前，浏览器中没有任何Nuxt或Vuex相干的实例对象（不能进行任何JS操作）。此时如果想携带保留在客户端的Token信息，只能通过Cookie实现（浏览器在发送Http申请时会主动带上客户端的Cookie信息） 第二种状况的路由跳转是在客户端进行的，真正发送HTTP申请个别都是在程序中通过Axios构建，而后再发送到部署Nuxt的Node服务端。因而，在发送申请前能够不便获取到Vuex、Localstorage、Cookie等任何地位保留的Token信息，而后增加到Request中发送到Server端。 这两种状况的次要区别在于，如何携带认证所需的Token。这两种状况是上面两种计划都要思考的，因为第二种状况限度少，次要思考第一种状况中的限度。 计划一 应用 Nuxt 提供的middleware性能实现中间件(middleware)容许定义一个自定义函数运行在一个页面或一组页面渲染之前，因而，能够在每次拜访页背后都先判断accessToken是否已过期，如果已过期，则刷新token。 middleware 的具体用法可参考官网文档。 用户在浏览器中执行登录认证后，通过Axios的Response拦截器将获取到的 accessToken、refreshToken， 存储在Vuex中。应用vuex-persistedstate将Vuex中的Token信息长久化到Cookie中，且只能存在Cookie中。否则无奈解决下面第一种状况中的限度。创立一个refreshToken.js的 middleware 配置在须要Token认证的页面（能够全局配置，也能够独自配置某些页面）在Nuxt的页面组件中提供的syncData或fetch办法中执行加载数据的申请外围代码如下： 第一步：创立refreshToken中间件，并配置 // refreshToken.jsimport { decode } from 'js-base64';import {isEmpty} from "@/plugins/common-util";// 间隔token过期工夫提前2分钟刷新token，避免客户端与服务端时间差const DISTANCE_EXP_TIME = 2 * 60;export default async function ({store, app, req}){ //1、获取cookie或vuex中的accessToken let accessToken = ''; if(process.server){ //这种就是间接再浏览器中输出url的，再服务端进行刷新token的状况 if(isEmpty(req.headers.Authorization)){ let cookie = req.headers.cookie if(cookie != null && cookie !== '' && cookie){ cookie = cookie.split('=') if(cookie.length === 2){ let cookieValue = JSON.parse(decodeURIComponent(cookie[1])) accessToken = cookieValue.user.accessTokenStr; } } } }else { //这种客户端渲染的状况浏览器中有残缺的VUE VUEX之类的js对象，能够间接获取 accessToken = store.state.user.accessTokenStr } //2、判断是否须要刷新token if(needRefreshToken(accessToken)){ //3、刷新token let bundle = await app.$userSecurity.refreshToken() // 此处和axios插件中任选一个中央更新token即可 //store.commit('user/setToken', bundle); }else { console.log('--->> 不须要刷新token') }}// 判断accessToken是否须要刷新function needRefreshToken(accessToken){ if(accessToken){ let payload = accessToken.split('.')[1] payload = decode(payload) payload = JSON.parse(payload) let exp = payload.exp let time = Math.round(new Date().getTime()/1000) if((exp - time) <= DISTANCE_EXP_TIME){ return true } } return false}// nuxt.config.js中全局配置 refreshToke 中间件，// 全局配置后每个页面组件渲染前都会执行 refreshToken中间件router: { middleware: 'refreshToken'}第二步：再@nuxtjs/axios插件的Response拦截器中解决HttpResponse中携带的新token ...