nuxt2 vue2

一、安装过程中的选项

    Programming language    :   程序设计语言

    Package manager         :   包管理器

    UI framework            :   ui框架

    Nuxt.js modules         :   nuxt的js模块

    Linting tools           :   代码校验工具

    Testing framework       :   测试框架

    Rendering modules       :   渲染模式

    Deployment target       :   部署目标

    Development tools       :   开发工具

    Version control system  :   版本控制工具

二、目录结构

    pages           :  存放页面

        类似于src/views

    components      :  存放组件

        类似于src/components

    static          :  存放静态资源

        类似于src/assets

    store           :  vuex状态树

        类似于src/store

    nuxt.config.js  : 全局的配置文件

        类似于vue.config.js

一、服务端生命周期

    1.1 nuxtServerInit( store , context ){}

        参数1  ： vuex上下文

        参数2  ： nuxt上下文

    1.2 middleware({store,route,redirect,params,query,req,res}){}

        ***类似于vue中的导航守卫

        a>全局

            nuxt.config.js进行配置

            router:{

                middleware:'名称'

            }

            新建middleware目录 ==> 文件.js

        b>页面

                <script>

                export default {

                  middleware:'auth'

                }

                </script>

                新建middleware目录 ==> 文件.js

            或者

                <script>

                export default {

                    middleware(){

       

                    }

                }

                </script>

               

    1.3 validate({params,query}){}

        ***校验url参数

        <script>

        export default {

          validate({params,query}){

            console.log('validate');

            return /^\d+$/.test(query.id);

          }

        }

        </script>

    1.4 asyncData({store,params}){}

        ***pages中的页面来请求数据的

    1.5 fetch({app,store,params}){}

 

二、服务端和客户端共有的 生命周期

    beforeCreate

    created

三、客户端生命周期

    beforeMount

    mounted

    beforeUpdate

    updated

    beforeDestroy

    destroyed

一、自动生成

    链接：https://www.nuxtjs.cn/guide/routing

    路由的跳转和vue差不多注意 <nuxt-link> 就行了

二、使用router.js

    2.1 下载 ： @nuxtjs/router

        npm i @nuxtjs/router -S

    2.2 下载完成后在nuxt.config.js的modules模块进行配置

        modules: [

            '@nuxtjs/router'

        ],

    2.3 把router文件放入nuxt项目根目录

        ***必须router.js

    2.4 修改router.js的内容

    2.5 nuxtjs/router返回的内容和vue有所不同

        export function createRouter() {

          return new VueRouter({

            mode: 'history',

            routes

          })

        }

导航守卫

一、router.js

    vue-cli中怎么用，nuxt中就怎么用，几乎一样。

二、nuxtjs

    2.1 中间件 : middleware

        a>全局

            1. nuxt.config.js进行配置

                router:{

                    middleware:'auth'

                }

            2. 新建middleware/auth.js文件

                export default ()=>{

                    console.log( 'middleware' );

                }

        b>局部

            新建middleware/auth.js文件

                export default ()=>{

                    console.log( 'middleware' );

                }

            <script type="text/javascript">

            export default{

                middleware:'auth'

            }

            </script>

            或：

            <script type="text/javascript">

            export default{

                middleware(){

                }

            }

            </script>

    2.2 插件  : plugins 全局

        a> nuxt.config.js进行配置

            plugins: [

                '~/plugins/router.js'

            ]

        b> 新建plugins/router.js

            export default ({app})=>{

                app.router.beforeEach((to,from,next)=>{

                    console.log( to );

                    next();

                })

            }

 

****补充：服务端不能使用localStorage和cookie的解决方案

参考链接：https://www.npmjs.com/package/cookie-universal-nuxt

1. 安装下载

    npm i --save cookie-universal-nuxt

2. nuxt.config.js进行配置

    modules: [

        'cookie-universal-nuxt'

    ]

3. 就正常使用

    this.$cookies.set()

    this.$cookies.get()

    ....

一、config配置head

    组件局部：

        <script type="text/javascript">

        export default{

            head(){

                return {

                    title: '关于我们_小鹿线',

                    meta: [

                      { hid: 'description', name: 'description', content: '此处是网站描述' },

                      { hid: 'keywords', name: 'keywords', content: '此处是网站关键词' }

                    ]

                }

            }

        }

        </script>

如果要使用sass需要安装：npm install --save-dev sass sass-loader@10

某个页面或者组件就可以使用

<style scoped lang='scss'></style>

一、安装axios

    1.1 npm install @nuxtjs/axios -S

    1.2 nuxt.config.js进行配置

        modules: [

            '@nuxtjs/axios',

        ],

二、安装axios

    2.1 npm install axios -S

三、asyncData生命周期 || 方法

   

    pages 目录中的页面组件才可以去用

        ***注意components内的.vue文件是不可以使用的

    asyncData中没有this

四、fetch生命周期 || 方法

    fetch是有this的

 

一、安装

    npm install @nuxtjs/axios @nuxtjs/proxy -S

二、nuxt.config.js进行配置

    modules: [

        '@nuxtjs/axios',

        '@nuxtjs/proxy'

    ],

    axios:{

        //是否可以跨域

        proxy:true,

        //retry:{ retries:3 },

        //baseUr: process.env._ENV == 'production'? 'xxx' ? 'xxx'

    },

    proxy:{

        '/api':{

          target:'http://localhost:4000',

          pathRewrite:{

            '^/api':'',

          }

        }

    },

一、nuxtjsloading默认是开启的，也可以关闭

    nuxt.config.js中

    loading:false

二、也可以自定义

    loading: '~/components/loading.vue',

    loading.vue中写入对应的内容

    查看api：https://www.nuxtjs.cn/api/configuration-loading

三、你也可以不用nuxtjs的loading

    loading:false

   

    自己在axios中进行封装