项目目标

把我个人博客的前端界面部分使用nuxt框架进行服务端渲染

nuxt介绍

nuxt可以把spa根据路由将单页面分割成多页面,比起vue的ssr渲染要更容易使用

nuxt的使用

项目创建

npx create-nuxt-app <项目名>

nuxt的目录结构

其中layouts目录用于存放APP.vue,将其改名为default.vue,既可使用全局的界面配置,注意得用 <nuxt/>代替<router-view>

nuxt的界面嵌套

pages目录用于存放vue项目的路由页面,nuxt默认情况下根据该目录,对路由进行配置,自动生成路由,所以无特殊情况是不需要自己手动配置路由的

components目录用于将vue项目的组件移动到此目录

plugins目录是插件的使用,例如如果项目使用了element.ui,则需要在该目录下配置,配置方法是在目录下新建elementui.js,并在文件下写入如下代码

import Vue from 'vue'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'
Vue.use(ElementUi);

同时使用npm安装element-ui插件

然后在nuxt.config.js文件中进行配置

module.exports = {
plugins: ['~/plugins/elementui']
}

assets文件用于存放需要被webpack打包的图片和css文件

注意:在使用路径引入图片时需要在路径前面加上~,不然会报错

store文件夹用于存放vuex文件,在文件夹下新建index.js文件,导出方式大概如下

export const state = () =>({
isLogin: false,
user:""
}) //state必须是函数才行 export const mutations = {
userStatus(state, flag) {
state.isLogin = flag
},
setuser(state,flag){
state.user = flag;
window.$cookies.set("user_session","haslogin",60 * 60 * 24)
},
getuser(state,flag){ var value = window.$cookies.get("user_session") if(value === "haslogin"){ state.isLogin = true;
} } }
export const actions = {
userLogin({commit}, flag) {
commit("userStatus", flag)
},
setusername ({commit},flag){
commit("setuser",flag)
},
getusername ({commit},flag){
commit("getuser",flag)
}
}
export const getters = {
isLogin: state => state.isLogin,
user:state =>state.user
}

未完待续

nuxt初探先到此,当然还有很多东西没有涉及,像动态路由,中间件的使用,还有vuex项目的使用等等,项目也还没改造完成,所以未完待续

nuxt.js学习初探的更多相关文章

  1. Nuxt.js学习心得

    一.官网 Nuxt.js - Universal Vue.js Applications https://nuxtjs.org/ 二.中文官网 Nuxt.js - Vue.js 通用应用框架 http ...

  2. Nuxt.js学习

    SSR服务端渲染 之前用vue做项目时,在浏览器中查看网页源码,是没有具体内容的,只有一个标签,用服务端渲染的话,查看网页源码数据都会显示出来,所以有利于SEO,能够被搜索到. Nuxt.js是做Vu ...

  3. Nuxt.js 学习笔记

    起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成 ...

  4. Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

    [TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...

  5. Nuxt.js入门学习

    Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用, ...

  6. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  7. 今天聊一聊nuxt.js(上)

    背景 近期在做内部系统的重构,从一线业务彻底的重构,经过充分的考虑我们准备把这个项目打造成前台业务的试验站,比如ssr和一些其他的前沿技术的探索,积累充分的经验后待合适的契机应用到C端的项目中. 既然 ...

  8. 从壹开始 [ Nuxt.js ] 之一 || 为开源收录Bug之 TiBug项目 开篇讲

    缘起 哈喽大家周二好呀,刚刚经历过了几天火车抢票,整个人都不好了,不知道小伙伴对今年的春节是否还一如既往的期待呢,眼看都要春节了,本来也想写篇2018总结篇,但是怕不免会出现鸡汤文的窠臼嫌疑,想想还是 ...

  9. 转战JS(1) 初探与变量类型、运算符、常用函数与转换

    转战JS(1)初探与变量类型.运算符.常用函数与转换 做为一名.NET后台开发人员,正考滤向Web前端开发转型,之前也写过一代前端代码,可是当再回头看JS,并有转向它的意愿的时候,突然发现:原来JS不 ...

随机推荐

  1. [转]SIMD、MMX、SSE、AVX、3D Now!、NEON

    转载来源<[整理]SIMD.MMX.SSE.AVX.3D Now!.neon> 本文摘取部分内容,详细请看原文. SIMD NEON是通用的SIMD(单指令多数据)引擎. 对于SISD,每 ...

  2. lnmp一键安装,安装php时失败

    查看安装日志 直接cd进入根目录报错内容:configure: error: mcrypt.h not found. Please reinstall libmcrypt 解决办法如下#使用wget可 ...

  3. QP简介

    QP简介 QP(Quantum Platform)是一个轻量级的.开源的.基于状态机的.事件驱动型应用程序框架.这个框架包括四部分: 事件处理器(QEP): 轻量级的事件驱动框架(QF): 任务调度微 ...

  4. spring-redis-session 自定义 key 和过期时间

    对于分布式应用来说,最开始遇到的问题就是 session 的存储了,解决方案大致有如下几种 使用 spring-session 它可以把 session 存储到你想存储的位置,如 redis,mysq ...

  5. 工厂设计模式灵魂拷问-Java实现

    show me the code and take to me,做的出来更要说的明白 GitHub项目JavaHouse同步收录 喜欢就点个赞呗! 你的支持是我分享的动力! 引入 我们经常听到工厂模式 ...

  6. DOCKER学习_010:Docker的文件系统以及制作镜像

    一 文件系统简介 1.1 Linux文件系统 LInux空间组成分为内核空间和用户空间(使用rootfs) linux文件系统由 bootes和 rootfs组成, bootes主要包含boot1 o ...

  7. Qt5 http/HTTPS访问 以及JSON解析的实用

    实用QT5访问HTTP/以及HTTPS协议访问 并且调用Json解析 #include "mywidget.h" #include "ui_mywidget.h" ...

  8. 洛谷$P$2518 计数 $[HAOI2010]$ 数位$dp$

    正解:数位$dp$ 解题报告: 传送门$w$ 感觉省选的数位$dp$还是比较有质量的辣,,,至少有一定的思维难度是趴$QwQ$ 这题要考虑到一个,我认为比较关键的点,就,对于一个位数不满的数,可以理解 ...

  9. Spring的一些基本概念(面试备用哦)

    1.什么是Spring, 它有什么特点? 包括哪些内容? Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. ◆  轻量——从大小与开销两方面而言Spring都是轻量的.完整 ...

  10. Linux 踩坑记

    # Linux docker内部执行apt-get install 报错 在某个项目中使用docker构建mysql容器后想要在容器中修改mysql的配置文件,使用vim后提示 bash: vim: ...