Nuxt学习_基础知识（一）

文章学习来源，nuxt中文网

1. 安装nuxt

• 指令
  • npx create-nuxt-app t_nuxt
  • 或
  • yarn create nuxt-app f_nuxt
• 执行指令后按需选择添加自己所需要的相关依赖，若安装出现报错等问题
  • 清除npm、yarn缓存 npm cache clean --force yarn cache clean
  • 切换安装命令
  • 切换包管理工具
• cd t_nuxt -> npm run dev

2. 路由信息

• 无需配置路由信息，在pages下面创建文件自动生成对应的路由配置
• 若pages下面是文件夹/页面.vue，会识别成 /文件夹/页面.vue路径

2.1 根据目录生成路由信息

通过pages下面的目录结构，会自动生成对应的路由信息，无需单独设置路由文件并在其中定义规则，动态路由以下划线_为开头

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue

以上页面结构对应的路由信息是

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    },
        {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments'