nuxt入门1

罗罗666

已于 2023-02-20 15:18:23 修改

阅读量322

点赞数

文章标签：前端

于 2023-02-15 17:41:00 首次发布

本文链接：https://blog.csdn.net/u014491457/article/details/129043325

版权

本文介绍了Nuxt.js，一个基于Vue的服务器端渲染框架，用于提升SEO和性能。通过创建项目、理解SSR与SPA的区别、学习nuxt.config.js配置、动态路由和参数传递，以及asyncData和fetch的使用，展示了如何加急学习并运用Nuxt进行开发。

摘要由CSDN通过智能技术生成

领导找了个网站模版，加急制作。拿到手一下，nuxt写的。那我就加急的学习一下吧。
今天记录一下这两天用nuxt开发和学习的一些东西。

先了解一下什么是nuxt。nuxt基于vue的通用框架，预设了利用vue开发服务器（SSR）渲染所有应用的配置；vue是单页面应用，不利于seo搜索引擎操作，而nuxt是利用vue开发多页面应用，在服务器端渲染，比较适合新闻、博客、咨询类的项目，移动端就别考虑使用了。
那么，注意代码兼容性（在不同环境下运行），服务器的负载（过大，比如图表类的）。
SPA用户体验很好，整体js渲染出来，称为CSR；客户端请求会返回一个很小的html结构，渲染html，js，template后，在请求数据后，再完成最终渲染，前后需要两次请求服务端，搜索引擎抓取不到SPA数据。
虽然SPA给服务器减轻负担，它也有缺点：首屏渲染时间长和不利于seo。
（注意：并不是做了SSR我们的页面就不属于SPA应用了，它仍然是一个独立的SPA应用）

开启nuxt项目：

安装：npm install npx -g //（vue5.2之后发布的一个命令）npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装！用完删掉，下次用再临时安装。
npx create-nuxt-app demo

——
Project name // 项目名称
Project description // 项目描述
Use a custom server framework // 选择服务器框架
Choose features to install // 选择安装的特性
Use a custom UI framework // 选择UI框架
Use a custom test framework // 测试框架
Choose rendering mode // 渲染模式
Universal // 渲染所有连接页面
Single Page App // 只渲染当前页面

客户端请求进入——>服务端通过nuxtServerInit这个命令执行在Store的action中，在这里接收到客户端请求的时候，可以将一些客户端信息存储到Store中，也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store中——>中间件机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用——>validate执行的时候对客户端携带的参数进行校验——>在asyncData与fetch进入正式的渲染周期，asyncData向服务端获取数据，把请求到的数据合并到Vue中的data中。

——目录结构
└─demo
├─.nuxt // Nuxt自动生成，临时的用于编辑的文件，build
├─assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
├─components // 用于自己编写的Vue组件，比如日历组件、分页组件
├─layouts // 布局目录，用于组织应用的布局组件，不可更改
├─middleware // 用于存放中间件
├─node_modules
├─pages // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改
├─plugins // 用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
├─static // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。
└─store // 用于组织应用的Vuex 状态管理。文件夹名不可更改。
├─.editorconfig // 开发工具格式配置
├─.eslintrc.js // ESLint的配置文件，用于检查代码格式
├─.gitignore // 配置git忽略文件
├─nuxt.config.js // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。
├─package-lock.json // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
├─package.json // npm 包管理配置文件
├─README.md

——配置文件nuxt.config.js

const pkg = require('./package')
module.exports = {
  mode: 'universal',    
  //  当前渲染使用模式，分为universal和spa，既然是nuxt开发，那就是universal
  // 全局页头配置
  head: {       
  //  页面head配置信息
    title: pkg.name,        //  title
    meta: [       
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
      // 这里可以添加网站验证码信息
      //  { name: 'google-site-verification', content: 'xxx' },
  
    ],
    link: [     
    //  favicon，若引用css不会进行打包处理
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // nuxt 加载进度条配置
  loading: { color: '#fff' },   //  页面进度条
  // 全局css
  css: [    
  //  全局css（会进行webpack打包处理）
    'element-ui/lib/theme-chalk/index.css'  
  ],
   // 配置后，会在页面渲染之前加载
  plugins: [        
  //  插件
    '@/plugins/element-ui'
  ],
  // 工具module
  modules: [       
   //  模块
    '@nuxtjs/axios',
  ],
 // 如果添加了@nuxt/axios则会需要此配置来覆盖默认的一些配置 
  axios: {
    https: true, 
    progress: true, // 是否显示加载进度条
    credentials: true, // 请求携带cookie
    baseURL: 'https://www.abc.top/api',
    proxy: true // 请求代理，开发中跨域问题解决方法
  },
  // 打包配置
  build: {      //  打包
    transpile: [/^element-ui/],
    extend(config, ctx) {       //  webpack自定义配置
    }
  }
}

——nuxt常用配置
1.配置ip和端口
nuxt.config.js

module.exports = {
  server: {
    port: 8080,
    host: '127.0.0.1'
  }
}

或者 package.json

"config": {
  "nuxt": {
    "port": "8080",
    "host": "127.0.0.1"
  }
},

2.全局配置css
/assets/css/common.css
nuxt.config.js中 css:[‘~assets/css/normailze.css’],

——Nuxt的路由配置和参数传递
nuxt自动生成路由，用nuxt-link即可。

<nuxt-link :to='/'>...</nuxt-link>   this.$router.push('/');

动态路由：
定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。
获取动态参数{{$route.params.id}}

路由传参：
nuxt-link中

方式一
传参：
<nuxt-link :to="{path:'/about',query:{index:id}}" target="_blank" ><nuxt-link>
地址栏显示：
loaclhost:3000/about/id
接收地址栏参数：
this.$route.query.index
 
方式二
传参： 
<nuxt-link target="_blank" :to="{name: 'log-id', params:{id: n.id,key:value}}"></nuxt-link>
地址栏显示：
loaclhost:3000/about/id
接收：
async asyncData ({ params }) { //  params.id 就是我们传进来的值}// 或者 created () { this.$route.params.xxx}`

在方法中

方式一
跳转：
getDescribe(id) {
    // 直接调用$router.push 实现携带参数的跳转
    this.$router.push({
      path: `/describe/${id}`,
    })   
接收：
$route.params.id

方式 二
注意：
页面之间的跳转使用query 不然的话刷新页面后会找不到参数
跳转：
 this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
})
接收：
$route.query.id

动态路由校验，参数是否有效

export default {
  // 这个方法必须返回一个布尔值，为true表示校验通过，为false表示校验失败。
  //注意validate不能写到methods属性中。
  validate(obj) {
    return /^\d+$/.test(obj.params.id)
  }
}