03. nuxt的基本使用

nuxt的用法95%都和vue一致。所以如果你使用过vue，则很容易上手。下面是一段nuxt的代码 ：

<template>
  <div>
    <select v-model="value">
      <option v-for="(item, key) in list" :value="item.value" :key="key">
        {{ item.name }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 2,
      list: [
        {
          value: 1,
          name: "深圳",
        },
        {
          value: 2,
          name: "广州",
        },
      ],
    };
  },
};
</script>

nuxt与vue的区别

这里主要列举了几个常用的区别，更多的区别请参考官网

1. 有服务端和客户端区分，在服务端运行期间，不能用this、window、以及操作dom，不然会报错

2. 组件不能放到pages文件夹下，不然会自动生成路由

3. 不需要我们配置路由

4. 有了layout

5. 有了中间件

6. 多了这几个常用的生命周期函数 ：asyncData、fetch、validate

7. created的生命周期函数，分为了服务端和客户端

8. 可以为pages下的每个页面设置单独的title、tdk、keyword等

9. 使用自定义插件或者第三方插件时，需要在plugins文件夹中定义，然后再nuxt.config.js文件中配置

9. vuex的state改成了必须是一个函数

10. 路由跳转用nuxt-link（vue是用router-link）