初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端框架之间进行选择: 选择您喜欢的 UI 框架: 选择您喜欢的测试框架: 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中. 添加 EsLint 以在保存时代码规范和错误检查您的代码. 添加 Prettier 以在

[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LESS.SASS 或 JavaScript |-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件 |-- layouts // 布局目录,用于组织应用的布局组件,不可更改. |-- middleware // 用于存放中间件 |-- pages // 用于存放

在plugins/iview.js中修改 初始代码如下 import Vue from 'vue' import iView from 'iview' import locale from 'iview/dist/locale/en-US' // Change locale, check node_modules/iview/dist/locale Vue.use(iView, { locale }) 修改成如下代码 import Vue from 'vue' import './iview-u

Nuxt 路由可以使用a标签进行链接跳转,例如我们创建了一个demo.vue的文件 <p> <a href="/demo">跳转去Demo页面</a> </p> 但是Nuxt中有专属的标签 nuxt-link, 因此上次可以改写为: <p> <nuxt-link :to="{name: 'demo'}">跳转去Demo页面</nuxt-link> </p> 注: 在实际开

  mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由   2.history路由 不会带#的     单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎么解决?   1.路由的懒加载 异步组件 (resolve)=>require(["组件的路径"],resolve); ES6的import ()=>import("组件的路径");     2.ssr渲染 服务端渲染 nuxt     路由常用的配置项 p

首先来讲一下服务端渲染 直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服务器的

公司最近在做的一个项目,依然是采用熟悉的vue开发,数据平台因为其数据量大的特点,采用传统的spa模式,首页加载时间很长,而SSR这种方式对于首屏的加载时间优化显而易见,同时还可以方便的进行SEO.因此借机学习Nuxt.js框架(文档详细,更新快,issue反馈及时)及iview(比较优秀的一款UI,基本满足项目需求). 项目部分截图 截图一: 账号和密码随意填写 截图二: 截图三: 刷新浏览器,重新从服务器端获取页面,看到是已经渲染过的html 项目地址 git clone https://g

1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试工具 http://www.browsersync.cn/ https://www.browsersync.io/ 草料二维码生成器 http://cli.im/ GitHub https://github.com/ StackOverFlow http://stackoverflow.com/ 图

1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试工具 http://www.browsersync.cn/ https://www.browsersync.io/ 草料二维码生成器 http://cli.im/ GitHub https://github.com/ StackOverFlow http://stackoverflow.com/ 图

github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Github地址 iview-dynamicRouter 实现目标 客户端从服务端拿到路由和权限数据后,刷新项目的路由和菜单列表,并进行权限控制. 项目基础 基础框架: iview组件库官方模板项目 iview-admin 的template分支项目,此项目为iview-admin的基础框架代码.项目地址:

上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章也一直在往如何实现服务端渲染的方向讲解,因为我个人感觉这个是一个重点,如果是只会如何使用的话,大家就可以走马观花的看看就行了,昨天呢,遗留了几个问题,我也想了想,还没有想好如何通过浅显的话来概括,如果要是搬出来教科书似的讲解,感觉又不是很清晰,我就在以后的领悟中补充吧,这里就先说下其中的三个问题: 1.我们通

耗费了大半天的时间,终于把页面的二级路由配置好了 先看我的目录 如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default.vue中,首页可以放到pages/index.vue,就可以了. 好了,步入核心的 情景,在中间件middleware/authenticated.js // 定义了一个中间件, 如果用户未登录, 则跳转登录页. export default function ({ store, redirect }) {

其实动态路由就是带参数的路由.比如我们现在新闻模块下面有很多新闻详情页,这时候就需要动态路由的帮助了. 新闻详细页面我们在news文件夹下面新建了_id.vue的文件,以下划线为前缀的Vue文件就是动态路由,然后在文件里边有$route.params.id来接收参数. /pages/news/_id.vue <template> <div> <h2>News-Content{{$route.params.id}}</h2> <ul> <li

在c盘创建一个iview-router的项目 . 然后使用默认的配置 跳过 添加vue-router的插件 编译我们的文件. 编译好之后,我们启动App 默认的页面就打开了. 默认两个路由一个是about界面一个是home 我们使用编辑器打开代码,用我们的iview的menu组件替换掉这两个路由 在Router这个js文件内已经配置好了这两个路由 分别对应了这两个组件 App.vue里面看到菜单是用router-link来渲染的.Router-link在渲染完成之后,会变成一个a标签. 我们把他

最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始的写法是line28和line38,导入组件,其结果是地址栏实现了路由跳转,但是页面却是一片空白.将其改为line29行的导入形式,就可以实现路由切换了.最后发现原来是自己的component后面多了个s 两种方法都可以!!!!! components:() => import('@/view/lo

Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面的 全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的assets/css下建立一个main.css文件. /assets/css/main.css(没有请自行建立) .page-enter-active, .page-leave-active { transition: opacity 2s; } .page-enter, .page-leave-a

动态路由就是带参数的路由.比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了. 比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以下画线为前缀的Vue文件就是动态路由,然后在文件里边有 $route.params.id来接收参数) index.vue (可以写三种方式): <a href=</a> <nuxt-link to="/commodity/123">commodity2<

nuxt.js中如果在同级目录中建两个_xxxx.vue的动态路由文件,那么页面跳转始终是跳的一个页面,如何解决这个问题呢?下面举个栗子: 第一步:新建两个页面文件 第二步:在nuxt.config.js文件中配置两个页面的动态路由 router: { extendRoutes(routes, resolve) { routes.push( { name: "pageA", path: "/strA-:id", component: resolve(__dirnam

export default ({store, redirect} => { if (!store.state.username) { redirect('/') } }) vuex 代码处理请求,nuxtServerInit 是每次请求都会执行的方法,state是导出的函数,目的是为了防止多个用户使用同一个状态 export const state = () => { username: '' } export const actions = { nuxtServerInit({commit

在main.js中的mounted中使用router.addRouters()方法后界面上的路由并未刷新. 在注释掉路由跳转的权限限制之后,发现直接在地址栏输入对应路由能够进去,只是侧边栏没有刷新. 再仔细看store/module下的app.js文件.发现侧边栏绑定的是router文件夹下的router.js中的对象... 所以在app.js中新建menuRouters属性,并将router.js中的值为其进行初始化. 这样当添加路由的同时在menuRouters也添加一遍.侧边栏就会响应st

watch: { '$route'(to, from) { if (to.fullPath !== from.fullPath) { this.$nextTick(() => { // 不加this.$nextTick时,路由跳转后还是上一次的数据,所以需要加上 this.myfunction() // 需要执行的方法 }) } } }, 同路由跳转,参数不同,mounted不执行是因为页面没有销毁,所以不会执行当参数变化时,可以监听路由变化,来做一些事情 来源:https://www.jian