作为一个本职工作是基础设施开发的后端人员，我将js比作linux系统，将vue比作docker/containerd，而nuxt就相当于kubernetes了。当然这个类比并不是非常准确。前端比容器大战要柔和的多，感觉大家都在底层上重复建设。对比容器技术，swarm/k8s/mesos也就5年左右就分出了胜负。前端目前主流还是react/vue/Angular这三家，基于这三家之上又有各自的服务端框架（更底层typescript倒是已经统一了），导致前端学习门槛较高，框架概念、设计模式其实也走了一遍后端框架的老路，很多概念后端开发可以平移过来。我比较相信Taylor Otwell（Laravel的创造者），他说vue好，所以我就跟着他一起用了。

前两篇记录了点vue2和vue3的笔记，这一篇记录下nuxtjs3，这是官网，2022 年 4 月 20 日正式发布 nuxt3，代号为“Mount Hope”。

Nuxt3是基于 Vue3 发布的 SSR 框架：

• SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
• SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好，对应企业网站、商品展示 、博客这类型的展示型网站。

这是官网显示的一些优势说明：

• 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。
• 更快：用动态服务端代码来优化冷启动。
• Hybird：增量动态生成和其他高级模式现在都成为可能。
• Suspense: 导航前后可在任何组件中获取数据。
• Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。
• Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。
• Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。
• Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。
• Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。
• Vite：用Vite作为你的打包器，体验轻量级的快速HMR。
• Vue3 ： 完全支持Vue3语法，这一点特别关键。
• TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。

安装

npx是npm从5.2版开始增加的命令

官方链接

npx nuxi init nuxt3-test  # 快速创建

npm install
npm run dev

生成文件如下：

这里要重点提的是 nuxt.config.js 文件，所有配置都在里面。

一些常用的目录如下：

- pages               // 页面目录，Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
- components          // 组件目录
- assets              // 静态资源目录
- public              // 不需要 vue 处理的静态资源，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
- layouts             // 项目布局目录
- common              // 存储js文件
- plugins             // nuxt扩展的js文件
- store               // vuex的配置文件，Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

上一篇记录了vue2的一些备忘，这一篇记录vue3和2的不同的地方。

2020.09.18发布vuejs 3.0.0，代号 one piece。官网：https://v3.cn.vuejs.org/

官方针对版本3的说明:https://github.com/vuejs/core/releases/tag/v3.0.0

一、更新内容

1. 性能提升
2. 源码升级
   1. tree-shaking
3. 更好支持TS
4. 新特性
   1. composition API

二、安装

配置下代理，备忘

npm init

npm config set proxy http://10.101.1.1:8118
npm config set https-proxy http://10.101.1.1:8118

npm i -S vue

前端不是我的主业，不过太久不用，捡起来每次都觉得头疼，还是稍微做点笔记吧。

首先是官方文档：https://cn.vuejs.org/v2/guide/，虽然目前到3版本了，还是先了解下v2版本的知识，并不复杂。

一、基本方法

基本就是官网内容。

1. 格式

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
       
    <div id="app">
         
    </div>
       
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
   

   

2. 数据绑定、css绑定、事件绑定和语法糖

   • v-bind:value=<expression> 单项绑定，语法糖 :value=<expression>
   • v-model:value=<expression> 双向绑定(只用表单)，语法糖 v-model=`
   • v-bind:class=xxx ,语法糖 :class=<str>
   • v-on:click.stop=<expression> 事件绑定，语法糖 @click.stop=<expression>
     • .stop
     • .prevent

3. 计算属性

   func 里this指针指向的是vm

   computed不吃性能，尽量用它

    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
         
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
         
      watch: {
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        }
      },
         
      created: function () {
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      },
         
      methods: {
        getAnswer: function () {
        }
     },
        
     mounted(){
        
     }
    })
   

   由vue管理的method，要以普通方式定义。

   否则应该用箭头函数，例如：

   getAnswer: function (()=>{})
   

   此时它的this为window。

   另外，指令directive相关的 this 都是 window

4. 循环语句和条件语句

   循环：

    <ul id="example-1">
      <li v-for="item in items" :key="item.message">
           
      </li>
    </ul>
       
    <ul id="example-2">
      <li v-for="(item, index) in items">
         -  - 
      </li>
    </ul>
       
    <div v-for="(value, name, index) in object">
      . : 
    </div>
   

   条件：

    <div v-if="type === 'A'"></div>
    <div v-else-if="type === 'B'"></div>
    <div v-else-if="type === 'C'"></div>
    <div v-else></div>
   

5. Vue 无法监控数组内容的改变

   https://cn.vuejs.org/v2/guide/list.html#数组更新检测

   对象因为有setter和getter，修改model可以监控到，view也会变动。

   但直接操作数组不奏效，因为数组没有这两个方法，引发view变动则需要调用如下方法：

   • push()
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()

6. 过滤器，用于一些常见的文本格式化

7. 生命周期

   一旦 data 数据变化就会重新解析模版。

   • create

   • mounted做初始化，把初始DOM放入页面时，仅调用一次。

   • update
   • destroy

8. 组件

   • 创建

     <template>
     </template>
           
     <script>
     import ComponentA from './ComponentA'
     import ComponentC from './ComponentC'
           
     export default {
       name: ''
       data(){
       },
       components: {
         ComponentA,
         ComponentC
       },
       // ...
     }
     </script>
           
     <style>
     </style>
           
     或者
           
     const vc = Vue.extend({ })
     

   • 注册

     new Vue({
       el: '#app',
       components: {
         'component-a': ComponentA,
         'component-b': ComponentB
       }
     })
     

   • 使用

     <div id="app">
       <component-a></component-a>
       <component-b></component-b>
       <component-c></component-c>
     </div> 
     

9. 原型对象prototype

   实例的隐式原型属性 __prototype__ 永远指向类(父类)的原型对象

   

使用命令行，发现 curl 某个请求时报错：

ERROR: The certificate of ‘xxx’ is not trusted.
ERROR: The certificate of ‘xxx’ has expired.

这就奇怪了，只在某个服务器上才有问题，其他服务器又没有问题。遂把证书抓下来看看啥情况。

openssl s_client -connect {HOSTNAME}:{PORT} -showcerts

# 例如：
openssl s_client -connect blog.kelu.org:443 -showcerts

即可下载证书。

另外如果 curl 可以使用 -k 跳过证书验证。