nuxt.js快速入门

nuxtjs目录结构

其目录结构包含了一个项目开发中通用的东西

assets 存放静态资源

componets 存放vue组件，这类组件类似于react中的无状态组件，可复用的用于构建页面内容，但不具有nuxtjs提供的特性

layouts 存放布局组件，但我感觉实际编写代码时作用不大?

middleware 存放中间件，有express或者koa开发经验的话，应该很容易理解

pages 类似于spa中的views文件夹，是整个项目中最重要的内容，值得一提的是，nuxtjs会根据pages的结构自动生成router

plugins 用于存放插件的配置文件，以elementui为例 

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })

这里用Vue.use()全局注册了elementui，后面需要按需引入的时候，还得修改


static 存放静态文件，文件夹中的内容会被映射的根目录下，并且不会被webpack编译处理


store 和vuex相关，存放spa单页应用中的vuex配置


nuxt.config.js 是nuxtjs的配置文件，可以配置项目的入口文件，类似于koa中的/bin/www


值得一提的是 ~ 可以代表根目录，不用再编写../../之类繁琐的路径url


nuxt.config.js


export default {
  mode: 'universal',   //选择单页模式还是多页模式
  ** Headers of the page
//由于项目没有html文件，这里可以直接指定title,以及其他配置
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ** Customize the progress-bar color
  loading: { color: '#fff' },
  ** Global CSS
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],//全局引入css文件
  ** Plugins to load before mounting the App
  plugins: [
    '@/plugins/element-ui'
  ** Nuxt.js dev-modules
  buildModules: [
  ** Nuxt.js modules
  modules: [
  ** Build configuration
  */  /
  build: {
    transpile: [/^element-ui/],
    ** You can extend webpack config here
    extend (config, ctx) {

其实配置文件还是比较通俗易懂的，其他的配置要看文档的api辽


是由nuxtjs自动根据pages的结构生成的


给vue文件或者文件夹添加_ 即可。对于动态路由可以添加路由校验，如果不满足要求，那么返回错误页面


在vue文件的同名文件夹中编写vue页面即可


pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

在middleware文件夹中添加js文件，其将会在下一个页面跳转之前执行，其接收的参数是ctx。


中间件执行流程顺序：


  • nuxt.config.js
    • 

    也就是说，应该在nuxt.config.js layout或者pages中添加middleware之后，中间件才会被执行
    

    类似于这样
    

    //vue文件中
export default {
  middleware: 'stats'  //中间件名
//nuxt.config.js中
module.exports = {
  router: {
    middleware: 'stats'

    官网的图应该很清晰的展现了nuxtjs视图
    

    创建app.html
    

    可以修改ie的条件表达式等，中小型项目其实没有必要改
    

    //默认模板
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>
//修改后的模板
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

    即通过修改layout/default.vue可以修改页面的布局
    

    类似于spa中的app.vue的作用
    

    <template>
    <div>我的博客导航栏在这里</div>
    <nuxt/>
</template>

    可以在默认布局中添加header之类的东西
    

    但是如果使用自定义layout，必须在pages中指定
    

    <template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
  // page component definitions
</script>

    pages
    

    这是nuxtjs中最主要的内容
    

    <template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  head () {
    // Set Meta Tags for this Page
  // and more functionality to discover
</script>
<style>
.red {
  color: red;
</style>

    一些不同于传统vue的特殊项
    
fetch
与 asyncData 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 fetch 方法不会设置组件的数据。详情请参考 关于fetch方法的文档。
配置当前页面的 Meta 标签, 详情参考 页面头部配置API。
layout
指定当前页面使用的布局（layouts 根目录下的布局文件）。详情请参考 关于 布局 的文档。
loading
如果设置为false，则阻止页面自动调用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置loading的情况下。请参考API配置 loading 文档。
transition
指定页面切换的过渡动效, 详情请参考 页面过渡动效。
scrollToTop
布尔值，默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于 嵌套路由的应用场景。
validate
校验方法用于校验 动态路由的参数。
middleware
指定页面的中间件，中间件会在页面渲染之前被调用， 请参考 路由中间件。