# vue-ssr3

**Repository Path**: nicefree/vue-ssr3

## Basic Information

- **Project Name**: vue-ssr3
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-20
- **Last Updated**: 2021-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# nuxt

## Build Setup

```bash
# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate
```

For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
生命周期
    nuxtServerInit

    middleware
        中间件执行流程顺序
        nuxt.config.js -> 匹配布局 -> 匹配页面
    validate
        参数校验，校验失败，则自动跳转到错误页面

路由
    约定式
        展示区 ： <Nuxt/>
        声明式跳转： <nuxt-link :to="{name: 'goods-id', params:{id: 3}, query: {a: 1, b: 2}}">商品03</nuxt-link>
            name: 路由名 目录名-其他目录-文件名
            params: key 要对等文件名
        子路由：
            目录代表子路由： 子路由内部同级的文件， 代表是同级一级路由
        展示区层级控制
            | PATH           | FILE               |
            |:---------------|:-------------------|
            |`/`             |`index.vue`         |
            |`/goods`        |`goods/index.vue`   |
            |`/goods/123`    |`goods/_id.vue`     |
            |`/goods/comment`|`goods/comment.vue` |
        pages/一级展示/二级展示
                     / index.vue 会在一级展示
                     / index.vue 空文档 代表 有默认页，不会找寻其他 _详情.vue
    扩展路由
        extendRoutes(routes, resolve) {
            console.log(routes)
            routes.push({
                name: 'home',
                path: '/index',
                component: resolve(__dirname, 'pages/index.vue')
            })
        }
    路由守卫
        前置
            依赖中间件middleware插件
            全局守卫： nuxt.config 指向middleware
                    layouts定义中间件
            组件独享守卫：
                    middleware
            插件全局前置守卫

        后置
            使用vue的befroeRouteLeave钩子
            插件全局后置守卫
数据交互
    安装：
        @nuxtjs/axios、 @nuxtjs/proxy

自定义loading页面
    loading: {
      color: '#399', height: '3px'
    }, 
    loading: '~/components/loading.vue'

vuex
    模块方式： `store` 目录下的灭`.js`文件会被转换成为状态树（当然, `index`是根模块）
    Classic(不建议使用): `store/index.js`返回创建Vuex.Store实例的方法

状态持久化 && token校验
    安装：cookie-universal-nuxt
    思想：登录时， 同步vuex && cookie, 强制刷新后，nuxtServerInit钩子，取出cookies，同步vuex,axios拦截器读取vuex

部署
    配置
        nuxt工程/nuxt.config.js
        server: {
            port: 3000, // default: 3000
            host: '0.0.0.0' // default: localhost
        }
    nuxt
        npm run build 打包
        需要复制到（阿里云）服务器的文件
            .nuxt
            package-lock.json
            package.json
            nuxt.config.json
            static
            server 反向代理
    api服务器
        全部copy到服务器
阿里云
    需要开启安全组: 3000 9001  (阿里后台)
    远程工具连接阿里云（finallShell)

    pm2 start /usr/local/9001/bin/www/ --name=node9001
    cd /usr/local/3000/
    pm2 --name=nuxt3000 start npm -- run start