NuxtJS

首页 > TAG信息列表 > NuxtJS

利用nuxtJS 制作纯静态页面的开发【SSR】

创建这样的一个纯静态的SSR形式的公共项目，下次只要copy除node_modules文件之外的所有文件重新npm i 就可以了； 1.创建项目 npx create-nuxt-app <项目名> 2. swiper 轮翻图的插件【我的这片博客有详细说明：https://www.cnblogs.com/tap819/p/16243250.html】 3.

Nuxt.js 解决跨域CORS问题 has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

安装： npm install @nuxtjs/axios @nuxtjs/proxy --save 2.nuxt.config.js 配置 modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], axios: { proxy: true, // 表示开启代理 prefix: '/api', // 表示给请求url加个前缀 /api cr

express+nuxtjs前后端分离

本文原文摘抄：https://www.cnblogs.com/bananan/p/15215943.html Express 框架是一个基于node.js的web应用框架，能够帮你创建一个从前端到后端功能完整的网站；Vue是一个流行的前端框架，主要是用来构建用户界面的，并且具有组件化，响应式等特点；所以理解为 express负责后端，vue负责前端

NuxtJS的AsyncData和Fetch使用详解

asyncData 简介 asyncData 可以用来在客户端加载 Data 数据之前对其做一些处理，也可以在此发起异步请求，提前设置数据，这样在客户端加载页面的时候，就会直接加载提前渲染好并带有数据的 DOM，完成服务端渲染，有助于搜索引擎的抓取。注意事项：由于在客户端创建实例化之前加载，所以不能

webstorm+Chrome配置nuxtjs的debug模式

1、配置nuxt.config.js 2、右上角点击edit Configurations，新增一个JavaScript Debug url地址填写项目启动之后的地址，端口号就是服务的端口号选择.nuxt，Remote URL填写webpack：///src 点击Apply，完成配置 3、配置完成之后。根据package.json中的启动命令，控制台启动服务。 4、点击

nuxtjs——全局方法组件等挂载

nuxt将全局组件以及方法等挂载同意放在了plugins中，以文件作为区分：例如，想要在此项目中全局挂载antd，那我需要在plugins下新建一个js文件，文件名随意，暂且叫antd-ui.js吧，里面的内容为： import Vue from 'vue'; import Antd from 'ant-design-vue/lib'; Vue.use(Antd); 然后需要

浅析NuxtJS项目如何进行qiankan微前端架构改造

　　qiankun 微前端改造成功之后，有几个固定的步骤，但都是在 SPA 页上改造成功的。所以昨天在 SPA 改造之后，我也在想如何能应用到我们项目上去，但是我们项目是有很多 SEO 的需求，所以采用的 SSR 渲染的 NuxtJS 改造的。　　NuxtJS 项目和 SPA 的VUE项目还是有挺大差别的，比如没有 moun

nuxt.config.js 文件配置

1. head 配置页面默认meta设置具体配置：https://zh.nuxtjs.org/api/configuration-head/ 2. loading 个性化定制页面加载（默认显示加载进度条）可以定制它的样式，禁用或者创建自己的加载组件。具体配置：https://zh.nuxtjs.org/api/configuration-loading/ 3. css 定义应用的全

nuxt 的 @nuxtjs/axios 使用

在使用 vue 的 ssr框架（nuxt）时，我们使用 @nuxtjs/axios 去发生请求，因为在这个方面，有很多错误，想要记录一下，待以后有办法了，就解决掉他。 1. 发送请求 1、下载 > npm i @nuxtjs/axios 2、然后在配置文件中配置 nuxt.config.js modules: [ '@nuxtjs/aixos' ] 3、使用：不

vue+NuxtJS使用 scss

vue+NuxtJS使用 scss 1.安装scss 在这一步卡了好久，网上看到了好多方法，最后都是安装失败，各种报错。 npm install --save-dev sass sass-loader@10 fibers 2.引用全局引入—>修改nuxt.config.js // Global CSS: https://go.nuxtjs.dev/config-css css: [ 'element-u

nuxtjs开发的ssr网站，如何在后退时返回到上次滚动位置

nuxtjs开发的服务端渲染网站，默认刷新或者返回的时候，会自动滚动到顶部的位置；要想去掉这个特性，我们可以修改编译好的_nuxt文件夹下的 router.scrollBehavior.js 文件 if ( // One of the children set `scrollToTop` Pages.some(Page => Page.options.scrol

Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 文章/发布部署

NuxtJS案例 - Realworld项目 - 文章/发布部署 11.5 文章详情展示基本信息把Markdown转为HTML展示文章作者相关信息设置页面meta优化SEO文章评论-通过客户端渲染展示评论列表 11.6 发布部署打包最简单的部署方式使用PM2启动Node服务自动化部署介绍GitHub Actions 自动部署

Nuxtjs 学习笔记 --- 01 安装

Nuxtjs 学习笔记 — 01 安装 1、使用 yarn creat next-app 构建项目遇到报错 syntax error near unexpected token `newline' 将 <project-name> 改为 project-name 即可。'<'和'>'是特殊字符，命令端输入命令时应该把'<>'去掉 2、选择配置项 // 项目名称 Project name: /

【服务端渲染】NuxtJS基础

Nuxt.js 的基本介绍官网：https://zh.nuxtjs.org/GitHub 仓库：https://github.com/nuxt/nuxt.js Nuxt.js 是什么 Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

Nuxt使用axios跨域问题解决方法

Nuxt 是 Vue 项目服务器端渲染（SSR)解决方案。而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/p

NuxtJS项目——开发工具

　　一、端对端测试　　ava 是一个很强大的 JavaScript 测试框架，结合 jsdom，可以轻松地给 nuxt 应用进行端对端测试。需要三步骤就可以完成端对端测试：　　（1）添加 ava 和 jsdom 作为项目的开发依赖：npm install --save-dev ava jsdom 　　（2）在 package.json 中添加测试脚本

NuxtJS项目——插件

　　Nuxt.js允许在运行Vue.js应用程序之前执行js插件，而nuxt.config.js文件中可以通过plugins属性来配置插件，并且将需要的插件可以放置在plugins目录下。　　（1）客户端使用的插件　　如果只想要插件在客户端使用的话，那么通过可通过nuxt.config.js文件的plugins属性的ssr选项来控制，

NuxtJS项目——配置

　　Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置，下面介绍一下nuxt.config.js文件中相关配置项。　　（1）build 　　Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。　　（2）css 　　该配置项用于定

nuxtjs里面使用vuex

普通方式使用普通方式的状态树，需要添加 store/index.js 文件，并对外暴露一个 Vuex.Store 实例： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = () => new Vuex.Store({ state: { count: 0 }, mutations: { add(stat

nuxtjs如何在单独的js文件中引入store和router

nuxtjs里面集成vuex的创建方式改变了，并且官方不建议以导出Vuex实例的方式创建store，并且会在nuxt3里面删除。这样就会存在一个问题，我怎么像普通vue spa项目一样直接 import store from '@/store'呢？　　虽然官方建议为这个js写一个plugins，然后在 plugins 里面使用 export default

NuxtJs+Koa2+MongoDB全栈个人博客项目在云服务器上的部署（二）

二、项目启动和部署 1. 项目简单技术介绍：此项目为个人博客网站，前台博客网站用nuxt.js开发，后台博客管理系统及接口用Koa开发，模板引擎使用的EJS，对数据库的连接及增删改查使用了mongoose。 2. 安装两个项目依赖，命令npm install，如果npm速度很慢，我们可以使用cnpm，安装命令npm instal

nuxtjs如何在单独的js文件中引入store和router

NuxtJS如何利用axios异步请求

第一种：使用nuxt 提供的 Axios插件 @nuxtjs/axios 1、安装：npm install @nuxtjs/axios -d 2、配置 nuxt.config.js exports default { modules: [ '@nuxtjs/axios', ]} 3、在提供的context(上下文对象)中取得$axios async asyncData({ $axios }) { const ip = await $axios

nuxt中axios的配置

需要npm axios？刚开始，我以为需要像普通的vue SPA开发那样，需要npm axios，这种方式的确可以生效。但在使用时并不方便。尤其是设置代理比较麻烦，而且在asyncData里与在普通methods里使用方式不一样。后来在nuxt的github上发现了nuxt是默认集成了axios的，所以不需要npm axios，但是