nuxt.js 第10页

Vue SSR（Vue2 + Koa2 + Webpack4）配置指南

如果您有SSR需求，对Webpack及Koa不是很熟悉，请直接使用NUXT.js。本文所述内容示例在VueSSRKoa2脚手架：github.com/yi-ge/Vue-S…我们以撰写本文时的

weixin_33774883·2020-08-05 14:05

NUXT.JS原理简述

1、用户打开浏览器，输入网址请求到Node.js2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据3、Nuxt.js获取到数据后进行服务端渲染4、Nuxt.js将html网页响应给浏览器

weixin_33674976·2020-08-05 14:59

从壹开始 [ Nuxt.js ] 之二 || 项目搭建与接口API

今天的内容比较多，主要就是包括：把前端页面的展示页给搭出来，然后调通接口API，可以添加数据，这两天我也一直在开发，本来想一篇一篇的写，发现可能会比较简单，就索性把项目搭建的过程简化，一次写好了，在开发Nuxt.js

weixin_30945039·2020-08-05 14:28

使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import

用nuxt集成koa2做vue后台，官方自带脚手架搭建的koa2仍是ES5语法，在构建koa2时默认的nodemon是没有使用babel编译的，所以首先需要在启动命令后加上--execbabel-node"scripts":{"dev":"cross-envNODE_ENV=developmentnodemonserver/index.js--watchserver--execbabel-node

weixin_30810239·2020-08-05 14:52

基于Vue的通用框架Nuxt.js

因为Vue是通过把你的代码编译的，生成是SPA，里面的html其实是空的，Nuxt.js属于SSR,也就是服务器渲染。Nuxt.js打包生成的每个路由都会对应相对的

weixin_30532759·2020-08-05 14:11

Nuxt.js 从入门到放弃

Nuxt是Vue上的SSR，也就是服务端渲染应用框架，可在很大程度上解决当前SPA和CSR的首页加载慢，不利于SEO的问题。本场Chat就将详细介绍Nuxt的使用以及相关概念，并且实战一个Demo来方便读者理解。本场Chat将包含以下内容：SSR和CSR的发展历程以及区别。SSR可以解决CSR和SPA的什么问题，为什么可以解决。Nuxt项目的快速搭建与API详解。Nuxt中跨域问题如何解决。Ivi

蔚1·2020-08-05 14:43

nuxt.js 路由

创建路由server/interface/city.jsimportRouterfrom"koa-router"//路由constrouter=newRouter({prefix:"/city"})router.get("/list",async(ctx)=>{ctx.body=['北京',"天津"]});exportdefaultrouter引入路由server/index.jsimportci

huoxingd·2020-08-05 14:42

nuxt.js中间件实现拦截权限判断

最近在把vue的项目改成基于nuxt.js是ssr渲染，需要进行权限拦截判断，网上查了不少资料。

雨沐枫·2020-08-05 14:41

Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南

如果您有SSR需求，对Webpack及Koa不是很熟悉，请直接使用NUXT.js。本文所述内容示例在VueSSRKoa2脚手架：github.com/yi-ge/Vue-S…我们以撰写本文时的

大灰狼的小绵羊哥哥·2020-08-05 14:06

Nuxt.js重构Vue项目解决SEO问题

原项目是一个个人网站，直接用Vue框架写的，前后分离封装性好利于维护，但是VueSPA单页面应用对SEO不友好，因为它页面全是js没有html页面爬虫根本爬不到，对于新手来说服务器ssr渲染比较吃力，推荐选择Nuxt.js

进阶的小发·2020-08-05 14:27

nuxt.js中使用数据源

一、在store文件夹中定义js文件。js文件书写步骤：1.定义state数据conststate=()=>({数据1：'',数据2：''})2.定义mutationsmutations中定义方法的直接改变state的数据constmutations={方法2(state，参数2){//此处state不可少state.数据1=参数2;},方法3(state，参数3){//此处state不可少sta

云月两相依·2020-08-05 14:55

Nuxt开发搭建博客系统

Nuxt开发搭建博客系统nuxt.js第三方插件的使用？

夕若没落丶然寒曲兮·2020-08-05 14:08

Nuxt.js配置BASE_URL 开发与生产环境对应相应的接口地址

第一步:检查包检查package.json文件是否有cross-env这个包,没有的话执行下面命令;npminstallcross-env-save简写:npmicross-env-S*cross-env--跨平台设置及使用环境变量包第二步:修改配置package.json文件修改配置(baseUrl=测试域名或正式域名)"scripts":{"dev":"cross-envbaseUrl=htt

阿猫阿狗哈·2020-08-05 14:20

vuejs单页面服务端渲染框架--nuxtjs(一)

参考：官网地址https://zh.nuxtjs.org/guide/Nuxt.js是一个基于Vue.js的通用应用框架。

风清云淡_A·2020-08-05 13:55

nuxt.js 项目的使用

运行图安装npxcreate-nuxt-appproject配置koa+axiostypescript-vuexgithubui框架element-ui目录结构assets—资源目录layouts—布局目录middleware—中间件目录plugins—插件目录static—静态(后台)在您的vue模板中,如果你需要引入assets或者static目录,使用~/assets/your_image.

维克多噗噗·2020-08-05 13:53

前端技术之：使用npx创建一个Nuxt.js项目

$npxcreate-nuxt-appmy-first-nuxtjsnpx:401安装成功，用时43.891秒>GeneratingNuxt.jsprojectin/Users/popgis/projects/my-first-nuxtjs?Projectnamemy-first-nuxtjs?ProjectdescriptionANuxt.jsapplicationfortest.?Useacu

popgis·2020-08-05 13:21

Nuxt.js服务器启动后访问报错404

Nuxt.js服务器启动后，日志没报错，可是访问的时候提示404：EMDAEMONHTTP/1.1404,NotFound经检查，编译和启动没报错。

lzhfdxhxm·2020-08-05 13:09

Nuxt.js项目开发

最近小编新接手了两个项目，这两个项目均是使用nuxt.js框架进行开发的，这对小编来说又是一个新的大陆，故而和各位小伙伴们絮叨絮叨这个东西。首先先说明一下这个东西是个啥。

lavendersue·2020-08-05 13:30

nuxt.js框架+iview插件搭建项目

一、使用nuxt创建项目（https://zh.nuxtjs.org/guide/installation）创建项目：npxcreate-nuxt-app配置sass：npminstall--save-devnode-sasssass-loader二、安装iview插件（https://www.iviewui.com/docs/guide/install）安装：npminstalliview--s

晴风向上·2020-08-05 13:12

nuxt的使用(一款vue基于服务器SSR渲染工具)

Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）。SSR，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传递给浏览器。

baijing_97·2020-08-05 12:30

Nuxt.js调用asyncData

Index{{username}}exportdefault{name:"Index",asyncasyncData(){constasyncData={};awaitnewPromise((resolve,reject)=>{setTimeout(()=>{asyncData.username='JohnSmith';resolve();},2000)});returnasyncData;}};

acgun00886·2020-08-05 12:42

nuxt.js 脚手架搭建项目中不支持ES6语法 ---- 解决办法

nuxt脚手架创建项目创建项目npxcreate-nuxt-appproject-app运行项目cdproject-appnpmrundev项目默认为CommonJs语法由于node.js本身是不支持ES6语法的，我们在其他Vue项目中使用的ES6语法，都是通过babel进行过转译处理的。而这里nuxt框架中，并没有帮助我们默认的转译处理。如果想继续使用ES6模块语法，就需要我们在启动程序中添加配

-小橙子-·2020-08-05 12:11

nuxt.js中 axios的配置

1.下载axiosnpmi@nuxtjs/axios-s2.在nuxt.config.js中配置axiosmodules:['@nuxtjs/axios',],此时，就可以在组件中使用啦asyncasyncData({$axios}){let{res}=await$axios.get(`https://xxx.com/api/xxx`)console.log(res)}3.配置axios的base

慢半帧·2020-08-05 12:36

Nuxt实现的SSR页面性能优化的进一步探索与实践

Nuxt.js官方定义：Nuxt.js是一个基于Vue的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。

大转转FE·2020-08-05 12:03

Nuxt.js + Vue.js + Element-ui

Nuxt.js是一个基于Vue.js的服务端渲染应用框架Nuxt.js官方提供了一个模板，可以使用vue-cli直接安装$vueinitnuxt-community/starter-template但是前提是你已经安装过

NeroSolomon·2020-08-05 12:32

Nuxt.js(创建vue应用程序的框架)

关于nuxt的详细信息--->官网:https://zh.nuxtjs.org/guide一、安装npxcreate-nuxt-app二、目录结构三、路由Nuxt.js路由是依据pages目录结构自

MiemieWan·2020-08-05 12:57

nuxt.js目录结构

Agwenbi·2020-08-05 12:51

Nuxt.js配合Koa搭建接口与使用Vuex

1.server文件路径下新建路由constRouter=require('koa-router')constrouter=newRouter({prefix:'/city'})router.get("/list",async(ctx)=>{ctx.body=['北京','上海']})module.exports=router2.server下index文件中引入路由constcityInterf

Can_X·2020-08-05 12:31

nuxt.js项目搭建

项目准备：nuxt2项目安装可以使用官方提供的脚手架create-nuxt-app,由于gitbash无法上下选择，所以window用户建议用cmd来搭建项目，首先输入指令$npxcreate-nuxt-appmt-app//mt-app替换成你需要的项目名接下来会有官方提供的一些配置选项，我使用的是以下配置除了上图还有prettier我选择不开启项目搭建成功后，我们的目录结构是这样的然后命令行给

帅帅狗·2020-08-05 12:29

nuxt.js开发项目实践(1)-nuxt目录结构

前言年前就想写一篇这样的文章，但是因为项目太多一直拖到现在才来做这件事，现在感觉不能拖了，用系列的方式来慢慢写吧，也是给自己一个成长的记录与回顾，结合两个项目的实际开发总结一下看看有没有可以借鉴与探讨的地方；最近一次用nuxt.js

weixin_34178244·2020-08-05 12:26

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台，发现官方自带脚手架搭建的koa2使用的仍是es5语法，如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的，所以我们首先需要在启动命令后加上--execbabel-node"scripts":{"dev":"cross-envNODE_ENV=developmentnodemonserver/index

weixin_33913377·2020-08-05 12:55

vue+nuxt.js+less+Node+koa2+Mongoose 实现个人博客系统

基于Nuxt.js服务器渲染(SSR)构建的个人博客系统博客前端：Nuxt.js+Element-UI+@nuxtjs/axios+Less博客后端:UI层：使用Vue+Vue-Router+Vue-cli

weixin_33809981·2020-08-05 12:55

Nuxt.js + koa2 入门

1.nuxt项目初始化下面是使用koa模板方法初始化一个项目，使用该方法需要将nuxt的版本降至1.4.2；官方https://zh.nuxtjs.org/guide/installation还要提供了脚手架工具，可用使用最新的nuxt2.0版本初始化一个项目。$vueinitnuxt-community/koa-template$cd$npmrundev2.新建路由(创建即配置)在pages目录

George_Fal·2020-08-05 12:54

nuxt.js、koa2项目踩坑

一、在用vue写项目时，写组件必须写上name属性，且在引用组件时，组件名首字母大写，且在模板结构中首字母小写，必须是这样写才可以。组件名首字母大写，模板中用首字母与后面名字用-分隔都不可以。代码如下：组件：{{item.name}}exportdefault{name:'e-nav'}引用组件的父组件：importEnavfrom'../components/index/header/nav'e

sunny327·2020-08-05 12:43

使用nuxt.js构建一个vue项目

使用nuxt2.0官方脚手架，我们需要全局安装npx，输入npmi-gnpx随后切换到想要创建项目的路径输入npxcreate-nuxt-app项目名称再随后会出现一堆配置项，可以集成koa，element-ui等模块，按需选yes或no即可注意：选择axios的时候是敲空格键，不是回车键有可能我们需要输入npmi--update-binary以杜绝编译时node版本的一些隐患如果使用css预处理

旭日佳年·2020-08-05 12:39

【入门】Vue，Nuxt.js，Koa2连接MongoDB（demo）

demo实现效果：对MongoDB的增删改查，表单验证，可编辑的table用到的技术:iview（前端框架，不是重点，本demo只用了可编辑的table）Nuxt.js(服务器端渲染，浏览器右键查看源码会有

盼儿哥·2020-08-05 12:55

nuxt.js-------koa2项目，环境错误一次性解决

nuxt.js虽然好用但是自己的脚手架安装完全是坑cnpmrundev报错确实main.jsnode环境nuxt版本不匹配，在网上找了很多解决方法没有解决，就一次性把所有脚手架和环境都升级到最新版本npminstallbackpack-core

孩子不懒·2020-08-05 12:24

nuxt.js打包上线流程

项目完毕后运行npmrunbuild把staticnuxt.configpackage.json.nuxt拷贝到服务器执行npmi执行npmrunstart后台：(egg)把egg文件夹拖到服务器npminpmrundevpackage.json配置：{"name":"ksproduct","version":"1.0.0","description":"MywondrousNuxt.jsproj

HoMeTown已被占用·2020-08-05 12:11

vue服务端渲染nuxt（三） nuxt.config.js 配置

4、dev：该配置项用于配置Nuxt.js应用是开发还是生产模式。5、env：该配置项用于定义应用客户端和服务端的环境变量。6、generate：该配置项用于定义每个动态路

mschange·2020-08-05 12:54

关于使用Nuxt.js + koa 构建 vue 项目时遇到的问题

npmrundev时，提示Cannotfindmodulemain.js，解决方案如：vueinitnuxt-community/koa-templatenuxt-learnnpminstallnpmrundevnpminstallbackpack-core@0.7.0--save-dev//在nuxt.config.js里找到eslint-loader将ctx.isClient改成ctx.Cli

海布里的冬季·2020-08-05 12:40

vue-ssr框架nuxt填坑

报错>[email protected]:\MaYunProject\nuxt-temp>nuxtE:\MaYunProject\nuxt-temp\node_modules\nuxt\dist\nuxt.js

东曦既上·2020-08-04 22:36

如何在Nuxt项目中给pm2配置生产环境和测试环境

在Nuxt.js项目中，我们有一个全局的环境变量process.env.NODE_ENV，默认情况下，这个变量的值要么是production，要么是development，分别表示生产环境和开发环境。

贾程序员·2020-08-04 21:05

nuxt.js 打包部署及刷新页面404问题解决

nuxt.js打包部署及刷新页面404问题解决一.打包npmrungenerate将生成的dist文件部署服务器上二.刷新404终极解决办法1.在nuxt.config.js文件中添加base为文件路径地址

weixin_43560347·2020-08-04 21:36

记一次服务端渲染的项目搭建（vue nuxt.js）

nuxt.js简介nuxt.js是基于vue.js的服务端渲染框架(SSR),众所周知，vue是开发单页应用(SPA)的，正常的流量网站主要是通过各种浏览器的搜索引擎来抓取的，而SPA应用不利于SEO，

weixin_39762508·2020-08-04 20:08

nuxt.js项目部署到linux服务器，并使用域名访问（说明遇上的大坑，首页静态资源可以访问，但是接口全部失效）

1.背景如今ssr是非常流行的，而vue使用的ssr正是nuxt.js，由于nuxt.js和普通的vue项目不同，它是有自带的服务器的，所以部署到linux的方式也和vue单页面应用不同2.步骤2.1准备源代码一般我都是直接把源码中的除了

巴中第一皇子·2020-08-04 20:54

Nuxt.js 开发SSR(服务端渲染)Web应用

与vuepress的关系：Nuxt.js能够胜任VuePress的功能，但它专为构建应用程序而设计，而VuePress更适合构建以内容为中心的静态站点，如技术文档，博客等。

kenblikylee·2020-08-04 20:13

Nuxt.js服务端渲染实践，从开发到部署

感悟经过几个周六周日的尝试，终于解决了服务端渲染中的常见问题，当SEO不在是问题的时候，或许才是我们搞前端的真正的春天，其中也遇到了一些小坑，Nuxt.js官方还是很给力的，提issue后很积极的给予帮助

weixin_34416649·2020-08-04 20:33

Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）

这时候就需要服务端渲染2016年10月25日，zeit.co背后的团队对外发布了一个React的服务端渲染应用框架Next.js几小时后，一个基于Vue.js的服务端渲染应用框架应运而生，与Next.js异曲同工，这就是Nuxt.js

weixin_34391854·2020-08-04 20:27

nuxt.js项目部署到生产环境时其中后端接口写外网地址不行的问题

最近写nuxt.js项目部署到生产环境遇到了各种各样的问题。

sunny327·2020-08-04 18:08

nuxt.js项目使用pm2部署测试环境和生产环境的配置

先说下需求：目前是一个项目是一个nuxt-app,如果要启动多个nuxt项目时，这时就需要不同的项目使用不同的端口号，这样可以做到互不影响。此项目中的用的端口号是5000，但是在ecosystem.config.js中怎么都加不上端口号，后来经过网上搜索和自己的一番配置，生产环境还是监听不到5000端口，其实质还是服务没有启动。后来经过查看官方文档和参考https://juejin.im/post