如何使用Nuxt.js

运行create-nuxt-app

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app

$npx create-nuxt-app <项目名>

自行选择配置项:

• 脚手架自动生成的目录
  
• 通过见名思义大体上可以知道每个文件的具体内容
  • assets 通常为静态资源文件
  • components为组件
  • layouts为布局 相当于Vue的public文件夹下的index.html模板 可以理解为页面的模板文件，可以有多个。
  • middleware为中间件 比如在路由的执行过程中，或者接口执行的过程中的函数
  • pages 相当于Vue里面的views，不同的是这里不会让我们自己来配置路由，需要按照他的要求来写，底层配置好的路由。
  • plugins 插件 创建时导入的Element-ui
  • static 静态资源 与assets的区别：是否需要经过webpack来处理，如果需要放在assets中，不需要放在static中。
  • store vuex与Vue中的组织方式有些差异
  • nuxt.config.js 是nuxt的核心配置文件（当需要使用scss等插件都需要进行配置，记得重启服务生效）

  css: [
    'element-ui/lib/theme-chalk/index.css',
    '@/assets/css/style.scss'
  ],
  // 这里在运行时如果报错,就需要安装解析scss文件的插件,$yarn add node-sass sass-loader -D

如何配置路由

在layouts下的default.vue 中可以使用nuxt-link 这个标签的用法和Vue中的router-link的用法完全一致

<template>
  <div>
    <nuxt-link to="/home/aaaaa">aaaa</nuxt-link>
    <nuxt-link to="/home/bbbbb">bbbbb</nuxt-link>
    <nuxt-link to="/home/ddddd">ddddd</nuxt-link>
    <Nuxt />   <!-- 相当于Vue中的router-view -->
  </div>
</template>

在nuxt中自动设置好了路径，/home/aaaaa也就是在page文件夹下的home文件夹内的aaaaa.vue文件，当点击aaaa时就会跳转到aaaaa.vue这个文件。 路径名和文件夹文件名要一致！

配置全局的css样式

在assets文件夹下建立一个main.css文件或者scss文件

/* 这是全局样式配置
   需要在nuxt.config.js的css中进行配置
*/
li{
  color: red;
}

在nuxt.config.js的css中配置路径

使用vuex

在store文件夹下建立一个index文件

export const state = () =>({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

使用时与Vue相同

执行方法: $yarn dev
打包方法: $yarn build