[Nuxt.js]Nuxt.js基础

迈不过友情╰ 2022-12-02 00:49 260阅读 0赞

#### Nuxt.js支持：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center] ####

#### Nuxt.js工作流： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 1]

#### Nuxt.js安装： ####

vue init nuxt-community/koa-template 项目名

这个是集成了koa-tempalte的nuxt.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][20200828160803548.png_pic_center]  
也可以这么安装(nuxt2.0官方的脚手架)：  
先全局安装npx

npm install -g npx

再执行命令

npx create-nuxt-app project-name

注意要指定版本为2.0.0，否则可能没有server framework选项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 3]

安装好后执行：

npm run dev

如果有报错参考：  
1.https://blog.csdn.net/weixin\_42614080/article/details/105613214  
2.https://blog.csdn.net/qq\_40571631/article/details/103285331  
成功启动则如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 4]  
访问localhost:3000看到如下即表示成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 5]

#### Nuxt.js目录 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 6]

安装好的Nuxt.js不会一开始就有store目录，需要我们自己创建，一旦创建了store目录，Nuxt.js就会自动为我们配置vuex，非常的方便，**“创建即配置”**。  
当我们在pages中创建了一个页面，比如search.vue  
![在这里插入图片描述][20200828170015773.png_pic_center]

<template>
      <section class="container">
        <img src="../assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
        <h1 class="title">
          Search.Vue
        </h1>
      </section>
    </template>
    
    <style scoped>
    .title
    { 
      margin: 50px 0;
    }
    </style>

此时我们去浏览器访问`localhost:3000/search`即可访问到这个页面，nuxt.js自动配置了和文件名一致的路由，**“创建即配置”**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 7]  
但是我们发现，每个页面底下都有一部分（图示红框标出的部分）并不是我们在对应的页面文件中编写的内容，这一部分其实是写在layouts目录下的  
![在这里插入图片描述][20200828170803882.png_pic_center]  
default.vue是在你没有配置声明layout模板的时候所有页面都默认用default.vue作为模板，当然模板中也可以引入组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][20200828171231171.png_pic_center]  
顺便一提，这个`<nuxt/>`组件也就相当于原版vue中的`<router-view/>`（如果要调用组件必须要加入这个组件，这个标签表示路由匹配到的组件显示的位置），那么还有`<nuxt-link/>`组件，也相当于`<router-link/>`

**那么接下来我们自己来写一些layout模板，就以search.vue为例**  
1.在layouts目录下新建search.vue

<template>
        <div class="layout-search">
            <h1>search layout header</h1>
            <nuxt/>
            <footer>search layout footer</footer>
        </div>
    </template>
    
    <script> export default { } </script>
    
    <style lang="css" scoped> .layout-search{ color:red; } </style>

2.在pages目录下的search.vue中声明

export default { 
        layout:"search"
    }

3.刷新页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 9]  
可以看到现在用的是我们自己编写的layout模板`layouts/search.vue`了

#### Nuxt.js配置 ####

打开nuxt.config.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 10]  
1.title: ‘starter’,  
这个表示页面的标题，我们把它改为title: ‘Jayee’,  
保存后会自动开始编译  
![在这里插入图片描述][2020082817341063.png_pic_center]  
编译完成后刷新页面  
![在这里插入图片描述][20200828173423929.png_pic_center]  
![在这里插入图片描述][20200828173430779.png_pic_center]  
标签页的标题已经从starter变为了Jayee  
2. meta:  
配置字符等等…  
4. css: \[’~assets/css/main.css’\],  
这个表示配置全局的css，我们上面的/l;ayouts/search.vue虽然没有引用main.css，但是footer标签仍然居中了（我的截图不完整，可能看不出来居中的效果，可以查看网页源代码看到确实有给footer加一个居中的样式），这个自动居中是写在main.css中的，就是因为这里配置了全局css，所以自动引入了main.css，所以footer标签居中了  
5. loading:  
用于配置加载圈的样式  
6. build:  
关于eslint的一些配置  
更多的配置参考：https://nuxtjs.org/api （不要去看中文文档，中文文档的版本太低了）

#### Nuxt.js异步数据&示例&SSR剖析 ####

1.首先我们在`server`目录下创建一个接口的目录`/interface`![在这里插入图片描述][20200828174744261.png_pic_center]  
然后创建一个接口文件，比如叫`city.js`

import Router from 'koa-router' // 引入koa的路由
    const router = new Router({ 
        prefix:'/city'  // 接口前缀
    })
    router.get('/list', async (ctx)=>{ 
        ctx.body = ["上海","长沙"]
    })
    export default router

2.既然引用了`koa-router`，我们当然要安装

npm i koa-router

3.然后在`/server/index.js`中引用这个接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 11]

import cityInterface from './interface/city'
    app.use(cityInterface.routes()).use(cityInterface.allowedMethods())
    //这是固定的写法

4.我们来测试一下这个接口  
curl http://localhost:3000/city/list  
![在这里插入图片描述][20200828180913419.png_pic_center]  
可以看到数据返回成功，说明接口没问题  
5.现在我们来用浏览器端发请求(通过`axios`)，接下来以之前写的`search`页面为例  
安装`axios`

npm install axios

修改seach.vue

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 12]

let { status,data:{ list}}= await axios.get('/city/list')
     //这是一个解构赋值,axios请求返回的结构与我们定义的变量结构相同

修改接口city.js![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 13]  
6.现在可以看到已经成功请求并且将数据渲染到了页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 14]  
此时我们查看源代码：  
![在这里插入图片描述][20200828203722439.png_pic_center]  
可以看到服务器下发的源文件中并没有上海和长沙这两个数据，说明他们是浏览器渲染的  
7.在nuxt.js中，我们用asyncData这个函数来进行异步数据请求的操作  
在asyncData执行的时候是没有app实例的（上面那种在mounted中写的方法是有的），所以这里我们不能写this，而是通过直接靠return返回的方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 15]

注意，这种方法默认的端口是80端口，而我们这里用的是3000端口(koa)，所以要写全接口地址  
此时我们打开网页源代码：  
![在这里插入图片描述][202008282031443.png_pic_center]  
可以看到服务器下发的源文件就已经有上海、长沙两个数据，并且和模板整合完了  
也就是说这种方法服务器端把编译好的内容下发给浏览器，同时也把异步获取的数据给浏览器端  
**这就是服务器端渲染（SSR）**  
8.用fetch请求异步数据  
在Nuxt.js工作流的那张图中可以看到，除了用asyncData还可以用fetch来请求异步数据  
![在这里插入图片描述][20200828204351914.png_pic_center]

**asyncData用于处理组件的数据，fetch用来处理Vuex的数据（提交Vuex状态）如果把第七步的asyncData改成fetch，是无法请求到数据也无法渲染的**

#### Vuex应用&示例 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 16]  
**“创建即配置”**  
1.在根目录下创建store目录，然后如下图创建文件  
![在这里插入图片描述][20200828205451637.png_pic_center]

//city.js
    const state = () => ({ 
      cityList: ['长沙','北京'] //城市列表
    })
    
    const mutations = { 
      add(state, text) { 
        state.cityList.push(text) 
      }
    }
    
    const actions = { 
      add: ({ commit}, text) => { 
        commit('add', text)
      }
    }
    
    export default { 
      namespaced: true,
      state,
      mutations,
      actions
    }

//navbar.js
    const state = () => ({ 
        navList: [] //navbar列表
      })
      
      const mutations = { 
        add(state, text) { 
          state.navList.push(text) 
        }
      }
      
      const actions = { 
        add: ({ commit}, text) => { 
          commit('add', text)
        }
      }
      
      export default { 
        namespaced: true,
        state,
        mutations,
        actions
      }

//index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    import city from './modules/city'
    import navbar from './modules/navbar'
    
    Vue.use(Vuex)
    
    const store=()=> new Vuex.Store({ 
        modules:{ 
            city,
            navbar
        },
        actions:{ 
    
        }
    })
    
    export default store

2.将search.js中改为取store中的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 17]  
3.刷新页面  
如果报错 `Error in render: "TypeError: Cannot read property 'state' of undefined"`则`npm run dev`重新启动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 18]  
可以看到页面显示了我们在cityList中定义的数据  
查看源代码也可以看到  
![在这里插入图片描述][20200828211831932.png_pic_center]  
说明这也是服务器端渲染（SSR）  
4.我们在index.js的actions中可以写入nuxtServerInit方法，这个方法表示在我们请求的时候，服务器端会写入一些数据到浏览器端的vuex中（正常情况当然不应该放到city的state中，只是这里我们没有建立user.js，为了演示方便用了city代替）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 19]  
这么做的好处是什么呢？比如某个用户访问了我们网站的首页，一般来讲浏览器应该要另外发起一次请求去服务端获取用户信息回到浏览器端，而这个方法则让用户访问首页的时候服务器端就自动返回用户的信息，省去了我们单独再做一次请求

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/82b469e3af2648488df508467e906466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a6abb703b907487b810dbad79e28ae5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ac5b49179384407bb7ffa0a0513ed639.png
[20200828160803548.png_pic_center]: /images/20221123/1ac8cfc367154f7aa8d85bcbf9df4db2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5fc629d5f266425e83e299317ebceec6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/5047fbd1d7ae4737bd43de77d85edaae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/2ca36eb6c2794c3ea9bb9f6c2c414600.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/18f5bd4c36814d05aee11d5e6eb4ccdb.png
[20200828170015773.png_pic_center]: /images/20221123/241917a2ae914b71b00a03e039ed9366.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/e880c1b602934eea90935ba82acf349e.png
[20200828170803882.png_pic_center]: /images/20221123/6d71896b9dad4329b588400150921271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/10c77480b6ee4662aa4bb1198751b88b.png
[20200828171231171.png_pic_center]: /images/20221123/180e50f8f7d54b5184ba34541b750dd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/640a9765f2294ceead0fdbabac04d0f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/378c097b311d4a649f69dcf34a265001.png
[2020082817341063.png_pic_center]: /images/20221123/d560dadc7b89451e80f89b2bc8a96b8e.png
[20200828173423929.png_pic_center]: /images/20221123/7e7033b46d06448b8df2907830ce07b1.png
[20200828173430779.png_pic_center]: /images/20221123/df773853965246a28a1edf259cd92d61.png
[20200828174744261.png_pic_center]: /images/20221123/88cbad878d82413990e4dafd0456f9f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/af70da7ee648497faa50d9360efe6240.png
[20200828180913419.png_pic_center]: /images/20221123/44e9fbcc7f0e497a942c93aa77982443.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/c80c27e104594c46a7bfad6516789690.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/66c7dcf9c9d94fd7bb0b15b5952bb473.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/7742bdd7b3a74f319ca18fcd19d2b164.png
[20200828203722439.png_pic_center]: /images/20221123/0b7f219c135e4fc997642733dc7e3df4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/24cbcd6c416541f3bb2445873acb73a9.png
[202008282031443.png_pic_center]: /images/20221123/67c70d07fe6749aaafe05cd615c39f63.png
[20200828204351914.png_pic_center]: /images/20221123/e2e3878dafaa4102abf81bbf7bbddede.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/2c20a393e4904eca84dd1e04a100dbe7.png
[20200828205451637.png_pic_center]: /images/20221123/5a193b038564492f82993d50473a007f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221123/d4746c7f46e3424082d8a6371e956418.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221123/f5c66dbfe4904d26a3780362d27cbca9.png
[20200828211831932.png_pic_center]: /images/20221123/0dd869494d88465b89788c295693ebac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221123/2071fbd2aef8406fb7e254cbe2e59a00.png