开始使用

首先安装 npx：

npm install -g npx

创建一个npx项目

npx create-nuxt-app my-nuxt-app

对于nuxt的一些基础用法我们不再介绍，详情参考官网，在这里我们只介绍一些配置如何使用，插件如何使用，axios如何使用

Nuxt默认别名 @ 就是项目根目录

<img src="@/assets/img.jpg"/>

网站根目录静态文件都放到 static下

配置 nuxt.config.js

默认内容如下：

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'tutorial-nux',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/],
  }
}

我们还可以增加环境变量模块

env: {
    baseUrl: 'http://localhost:3000'
  },

使用方式

<template>
  <div class="container">
    <div>
      {{baseUrl}}
    </div>
  </div>
</template>

<script>
export default {
  head(){
    return{
      title:"自定义标题"
    }
  },
  data(){
    return{
      baseUrl:process.env.baseUrl
    }
  }
}
</script>

nuxt有一个默认的环境变量 NODE_ENV，其值为（production/development）即生产模式/开发模式

head模块

head: {
    title: 'tutorial-nux',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

这里面用来配置所有页面的head默认内容部分，如果想在指定的页面修改，则在每个页面进行自定义

<template>
  <div class="container">
    <div>
      
    </div>
  </div>
</template>

<script>
export default {
  head(){
    return{
      title:"自定义标题"
    }
  }
}
</script>

css模块

// Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],

在这里你可以引入全局样式

未完待续