项目目标

把我个人博客的前端界面部分使用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. swiper 使用参考 禁止手动滑动 监听事件

    最外层容器加类名  swiper-no-swiping 监听切换事件 onTransitionEnd: function(swiper){ console.log('过渡结束'); }

  2. 企业级Docker私有仓库Harbor

    一.Harbor简介 1.Harbor介绍 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docke ...

  3. python 下载bilibili视频

    说明: 1.清晰度的选择要登录,暂时还没做,目前下载的视频清晰度都是默认的480P 2.进度条仿linux的,参考了一些博客修改了下,侵删 3.其他评论,弹幕之类的相关爬虫代码放在了https://g ...

  4. Django的安装命令

    国内的一些pipy镜像源: 1.清华源: https://pypi.tuna.tsinghua.edu.cn/simple 2.豆瓣源: https://pypi.douban.com/simple ...

  5. JAVA8学习——深入浅出函数式接口FunctionInterface(学习过程)

    函数式接口 函数式接口详解:FunctionInterface接口 话不多说,先打开源码,查阅一番.寻得FunctionInterface接口 package java.util.function; ...

  6. Centos 7.5安装 Nginx 1.14.1

    1. 准备工作 查看系统版本 输入命令 cat /etc/redhat-release 我的Centos版本 CentOS Linux release 7.5.1804 (Core) 安装nginx所 ...

  7. tomcat 配置项目前缀(推荐方式四)

    一. 显示配置 Context 的 path   需要在 server.xml 文件中手动配置. <Host name="localhost" appBase="w ...

  8. C# 将PDF转为Word、Html、XPS、SVG、PCL、PS——基于Spire.Cloud.PDF

    Spire.Cloud.PDF提供了接口PdfConvertApi可用于将PDF文档转换为其他格式文档,如Word(docx/doc).Html.XPS.SVG.PCL.PS.Png以及XPS转成PD ...

  9. Okhttp解析—Okhttp概览

    Okhttp解析-Okhttp概览 Okhttp作为目前Android使用最为广泛的网络框架之一,我们有必要去深入了解一下,本文是Okhttp解析的第一篇,主要是从宏观上认识Okhttp整个架构是如何 ...

  10. SQL server 基本语句

    --查询数据库是否存在 if exists ( select * from sysdatabases where [name]='TestDB') print 'Yes, the DB exists' ...