Nuxt.js之快速构建教程

Nuxt.js

2019-02-20

214

1

前言

    VUE开发一个单页面应用有个不好的点就是对搜索引擎SEO十分不友好,我们的网站要想在搜索引擎中排名靠前,少不了SEO优化,而Nuxt.js就是VUE用来解决这个问题的。它是在服务端渲染SSR后直接返回已经渲染好的页面,页面就不再只是一个div标签。详细介绍:Nuxt.js是什么?

相关demo:https://github.com/lmy01/nuxt_demo

快速构建一个Nuxt.js项目

    利用Nuxt.js团队提供的脚手架工具 create-nuxt-app,前提确保安装了npx(npm5.2.0默认安装了npx)

    npx create-nuxt-app <项目名>

    或者用yarn

    yarn create nuxt-app <项目名>

    接下来会提示你安装哪些包,根据自己的代码习惯进行选择即可。

    

    等到安装完成后,运行npm run dev启动项目。

     

    

目录结构介绍

  

  assets 用于存放需要编译的静态资源如 LESS、SASS 或 JavaScript;

    components 用于存放可以被复用的组件,但是这里不能使用nuxt.js的相关扩展(如不可使用asyncData方法);

    layouts 用于存放布局组件,所有页面都会加载到default.vue中的里,该目录名为Nuxt.js保留的,不可更改;

    middleware 用于存放项目中所用到的中间件;

    pages 用于存放组织应用的路由及视图。Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置;

    plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件;

    static 用于存放静态资源,该目录下的文件不会经过nuxt.js进行编译;

    store 组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。该目录名为Nuxt.js保留,不可更改

    nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。该文件名不可更改。官方配置介绍

    别名:~ 或 @ 表示src目录,~~ 或 @@表示根目录。默认情况下,src目录和根目录相同。

    提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

本篇基础介绍先到这里,请转下一篇 Nuxt.js之路由介绍

参考文档:nuxt.js官网教程

 

发表评论

全部评论:1条

神秘网友 2019-05-06

get

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01