【环境搭建:一】搭建前端SSR项目 - Nuxtjs

【环境搭建:一】搭建前端SSR项目 - Nuxtjs

2019-10-22 17:59:32 评论 1 阅读 114 喜欢 0

介绍

从零搭建SSR项目的话,直接使用Nuxtjs即可(Nuxt.js官网),集合了SSR相关的插件。

初始化项目

安装最新Node,默认已经安装npx

npx create-nuxt-app my-demo

也可以使用yarn安装

yarn create nuxt-app my-demo

回车只会出现安装选项:

重点说明下Choose rendering mode Universal、SPA

  • Universal:真正的服务器渲染模式
  • SPA:单页应用

在开发的时候,一定要选择Universal开发~!!假设开发使用spa,build打包时候切换回Universal,大概率无法打包打包成功,又要返回去重新调试(血的教训)。

像asyncData这类的api在Universal、SPA执行的效果是不一样的,为什么不给自己挖坑,不要选择SPA模式。

安装完成后项目已经搭建好了!!

项目目录

项目搭建后,会默认生产如下目录:

.nuxt/                     #编译后项目文件
assets/                  #静态资源文件
components/          #组件文件
layout/                   #布局模板文件
middleware/           #中间组件
pages/                   #页面
plugins/                 #插件文件
static/                   #静态资源文件(此文件夹存放不需要编辑的文件)
store/                   #vuex
nuxt.config.js        #nuxt配置文件
package.json

仔细看发现并没有router路由相关的配置文件,这就是和普通vue不同之处,nuxt项目路由是根据pages文件夹自动生产的!

路由说明

根据pages目录结构自动生成对应的vue-router配置

假设要添加一个登录页面,在pages下添加login.vue文件

pages/
--| login.vue
// 或
pages/
--| login/
----| index.vue

自动生成路由配置如下:

router: {
  routes: [
    {
      name: 'login',
      path: '/login',
      component: 'pages/login.vue'
    }
  ]
}

nuxt布局

nuxt默认有两个布局模板:default.vue(默认)、error.vue(错误页面,文件不存在时可新建文件后设置对应的样式)

nuxt中的视图与vue的‘<router-view>’标签是一样的,因为nuxt中路由是根据pages自动生成的,不能像vue那样直接设置不同的布局组件,所以提供了layout让用户之定义布局

<script>
export default {
  layout: 'blog'  // 对应layout文件夹下的blog.vue文件,布局文件必须存放在layout
}
</script>


其他功能基本与vue没有区别,更多的说明可查看官网文档Nuxtjs中文官网

编辑于: 2019-10-24 14:12:09
分享