nuxt.js学习初探

项目目标

把我个人博客的前端界面部分使用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项目的使用等等,项目也还没改造完成,所以未完待续

巴特西