首页 > 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里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除。这样就会存在一个问题,我怎么像普通vue spa项目一样直接 import store from '@/store'呢?   虽然官方建议为这个js写一个plugins,然后在 plugins 里面使用 export defa

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,但是