# Nuxt-learn

**Repository Path**: shaohqfspace/nuxt-learn

## Basic Information

- **Project Name**: Nuxt-learn
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-18
- **Last Updated**: 2022-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### Nuxt.js
  - 什么是Nuxt.js
  > Nuxt.js是一个基于Vue.js的通用框架，通过对客户端、服务端基础架构的抽象组织，Nuxt.js主要关注的是应用UI渲染，我们的目标是创建一个灵活的应用框架

### 路由
  - 约定式路由`路由原理在.nuxt/router.js下查看`
    - redirect重定向
    ```js
    export default function ({ redirect }) {
      // ...
      if (!token) {
        redirect({
          path: '/login',
          query: {
            isExpires: 1
          }
        })
      }
    }
    ```
  - 动态路由
  - 动态嵌套路由
  - 未知嵌套深度的动态嵌套路由
  - 嵌套路由
  - 命名视图
  - 路由守卫
    - middleware中间件
      - 独享守卫：页面组件中使用
      - 全局守卫：在nuxt.config.js中使用 
      - 局部后置守卫：组件beforeRouteLeave钩子
      - 定义在plugins中
      ```js
      // plugins/router.ts
      
        export default ({ app }:{app:any}) => {
            
            app.router.beforeEach((to:any, from:any, next:any) => {
            
                if(to.path=='/user'){
                        console.log('user')
                }
                next();
            })
        }
      // nuxt.config.js
       //插件机制
        plugins: [
            './plugins/main.ts',
            { src: './plugins/route', ssr: true }
        ],  
      ``` 



### 代理配置`Nuxt.config.js`

  - 第一步 在plugins目录，起一个性感的插件名，比如叫axios.js
  ```js
   export default({$axios})=>{
    // 请求拦截
    $axios.onRequest(req=>{
        // doing something...
    })
    // 响应拦截
    $axios.onResponse(res=>{
        // doing something...
    })
    // 错误拦截
    $axios.onError(err=>{
    // doing something...
    })
    }
    // Nuxt.config.js
    export default {
    plugins: [
        {
        src:'~/plugins/axios',
        ssr:true // 默认为true，会同时在服务端（asyncData（{$axios}））和客户端（this.$axios）同时拦截axios请求，设为false就只会拦截客户端
        }
    ]
    }
  ``` 

### 自动导入组件 `如果在根目录components声明的组件，无需引入挂载直接引入即可`

### 组件名称约定
  ```js
  | components/
    --| base/
    ----| foo/
    ------| Button.vue
    <BaseFooButton />
  ``` 

### 生命周期 
  !img[https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1308375b9f98485185e28ae5f50ddb5a~tplv-k3u1fbpfcp-watermark.awebp]
  - fetch与asyncdata类似，不同点就是fetch不会设置组件属性，asyncdata中设置了属性之后，里面的属性会与data合并
- 生命周期在服务端与客户端的执行顺序。  
  - SSR：middleware（中间件）》validate（参数效验）》 asyncData（异步数据）》 fetch(获取状态) 》 beforeCreate（vue2中生命周期）》 data（vue2中data）》 create(vue2中的生命周期)；
  - CSR:beforeCreate》data》create》head》mounted

### middleware与plugin的区别
  - middleware中间件用于为组件添加条件渲染
  - plugins 插件用于拓展Nuxt功能,例如向nuxt中加入Axios或者加入Element 

### Vuex
  > 在nuxt.js 中使用Vuex直接在store文件下创建index.js就可以当做入口文件


### 结合 koa 使用`nuxt不会驱动koa服务，两个是单独的服务Nuxt/koa各占用一个接口`
  - koa 是单独启动的并且单独占用端口

### vue3中使用数据获取`必须在setup中使用`,推荐使用vue2的语法去开发
    - useFetch
    - useLazyFetch
    - useAsyncData
    - useLazyAsyncData  

### 命令
  - `npm run dev`   开发模式运行命令
  - `npm run start` 打包之后在服务端运行命令
  - `nuxt generate` 打包之后会生成静态文件`html`
  - `nuxt build`  打吧之后根目录文件不会发生变动 .nuxt下会生成dist文件

### 部署Nuxt项目
 
  - 在服务器上需要安装Nginx(反向代理)+node(服务启动)+pm2(进程守护)；
    - Nginx 在生成环境中，我需要使用到nginx做代理服务器，解决跨域。因为我们的项目的前后端可能部署在不同的服务上,因为nuxt部署也需要启动服务 
    - Node 因为Nuxt服务基于node所以必须安装node
    - Pm2 进程守护，避免中断Nuxt进程
  - 打包
    - nuxt generate 静态部署，会生成html文件
    - nuxt build `推荐`
  - 部署`分为两种部署情况`
    1. 第一种就是直接部署
    - 打包之后将 `.nuxt,static,package.json,nuxt.config.js` 四个文件 放到服务器根目录nuxt(需要提前创建好)

    - 执行`npm install`

    - 执行`npm run start`

    > 这种方法的弊端就是当启动nuxt服务的时候，在不想关闭nuxt服务还想启动其他的服务的情况下不得不停止Nuxt进程，才能启动其他进程。

    2. 第二种就是使用 Nginx(反向代理)+node(服务启动)+pm2(进程守护) 进行部署
    > 打包之后将`.nuxt,static,package.json,nuxt.config.js`四个文件放入服务器目录下 nginx直接放在html/nuxt下即可

    - 进入nuxt文件执行`npm install`

    - pm2进程守护：继续在此页面执行`pm2 start ./node_modules/nuxt/bin/nuxt.js -- start`

      - 启动后Nuxt默认地址`127.0.0.1:3000` 可以通过nuxt.config.js进行更改但更改之后需要与Nginx配置对应
      - 如果使用了koa就可以直接找到入口文件执行即可

    - 执行`pm2 list`就可以查看进程`使用pm2 后续如果需要启动其他服务就不需要关闭Nuxt进程了`

    - Nginx反向代理:修改ngxin配置
    ```js
    upstream nodenuxt {
    server 127.0.0.1:3000; #nuxt项目 监听端口
    keepalive 64;
    }
    server {
        listen 80;
        server_name https://www.example.com; #访问域名  
        location / {
            proxy_http_version 1.1;        
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "upgrade";        
            proxy_set_header Host $host;        
            proxy_set_header X-Nginx-Proxy true;        
            proxy_cache_bypass $http_upgrade;        
            proxy_pass http://nodenuxt; #反向代理
        }
    }
    ```
    - 最后启动Nginx 服务器上访问`http://localhost/` 就可以访问了
- 优秀项目git`https://gitee.com/lihann/nuxtkoa2`
### 坑
  - `operation not permitted 出现此错误 再次执行npm run dev即可`