vue3加nuxtjs

vue-cli     版本：vue2.x 
            vue-router 3.x
            vuex 3.x 
最新

    vue3.x
    vue-router 4.x
    vuex 4.x 

pc端的项目

    seo优化  ：多页面，title、右击查看源代码数据是在

页面：单页面（spa） ==> 多页面？
渲染模式：客户端渲染    ===> [服务端渲染]

1. vue2.x  ==> vue3.x

    2和3版本的区别
    2的项目如何 在 3的版本跑起来

2. vue本身单页面的模式和客户端渲染的模式，如何做成

    多页面、服务端渲染，从而解决seo的问题

一、vue3.x

    Vue3 + Vite + pinia

    1.1 创建项目    

        采用vue create <项目名称>
        ***基于的构建工具是webpack

        vue 基于webpack构建工具，如果项目比较大，修改一个东西，终端运行要等要久

    1.2 Vite是一个构建工具

        webpack
        vite     

        vite可以让我们在开发过程中提升开发效率
            原因：比webpack编译更快

        1. 安装项目

            

npm init @vitejs/app 项目名称

            ***如果选择vue，那么版本是vue3.x

        2. vite构建工具的Vue2.x项目，步骤

            a> 把老项目的package.json中的 “dependencies”
            复制粘贴到，新建的vite项目的package.json中的 “dependencies”里

            b> npm install

            c> 安装插件

                

npm install vite-plugin-vue2 -D

            d> 在vite.config.js配置            

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
	plugins: [createVuePlugin(/* options */)]
}

            e> cnpm i vue-template-compiler -S

            注意：vite默认是不支持@和require

                支持@ : https://xuexiluxian.cn/blog/detail/1830b8a558dc46dbbaa32273d8797969

                支持require  : https://xuexiluxian.cn/blog/detail/9799dee7906243979aeb2b4d33f00120

        3. vite构建工具的Vue3.x项目，步骤

            注意：vite默认是不支持@和require

                支持@ : https://xuexiluxian.cn/blog/detail/1830b8a558dc46dbbaa32273d8797969

                支持require  : https://xuexiluxian.cn/blog/detail/9799dee7906243979aeb2b4d33f00120

    1.3 Vue3有一个很好的点，向下兼容

        A》在vue3中写vue2的代码是可以的。

        B》vue3.x升级相对于vue2最大的改变是什么？

            性能的提升 : 

                    1. 性能优化
                    2. 数据响应式[ref、reactive] 

                        vue2.x : object.defineProperty
                        vue3.x : new Proxy 

                        结论：new Proxy 的性能比 object.defineProperty好

                        具体好在什么地方：

                            1. new Proxy不用循环，循环还报错呢
                            2. vue3中，去除了this.$set

    1.4 Vue2.x 和 Vue3.x对比

        1. api模式不同

            vue2.x 是 options API

            vue3.x 是 组合式   API

        2. 重点要了解setup内部写法

            setup是什么组合？

                data + computed + methods + watch

                2.1 setup中定义数据

                    let str1 = '111111'; //不响应
                    let str2 = ref('22222');
                    let str3 = reactive({
                        a:'333333'
                    });

                    ref和reactive是响应数据,ref和reactive区别

                        ref定义基本类型 + 数组 + 对象

                            使用上xx.value

                        reactive 必须是引用类型，要不然警告

                            不用像ref一样.value，reactive是可以直接使用的

                2.2 setup中定义方法

                    直接写    

                2.3 生命周期

                    参考一下：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

                    ** 注意：onBeforeMount请求接口

        3. Vue3的异步组件

            3.1 引入方式

                //异步组件引入的方式
                const Head = defineAsyncComponent(()=>
                    import('@/components/Head')
                );

            3.2 如果性能优化==》按需加载组件

                vueuse : https://vueuse.org/core/useShare/#demo

                下载:npm i @vueuse/core
                template : 
                    

                js:
                    //按照需求加载组件
                    const target = ref(null)
                    const targetIsVisible = ref(false)

                    const { stop } = useIntersectionObserver(
                      target,
                      ([{ isIntersecting }], observerElement) => {
                        targetIsVisible.value = isIntersecting
                      },
                    )

        4. 动态组件

            vue2.x ==》

            vue3.x ==》

        5. v-if和v-for优先级

            vue2.x  v-for的优先级比v-if高

            vue3.x  v-if的优先级比-for高

        6. 混入 mixins ：复用功能

        7. 路由

            导航守卫没有变化

            useRouter  ===> this.$router
            useRoute   ===> this.$route

            使用:
                import { useRouter,useRoute } from 'vue-router'

                let router = useRouter();
                let route = useRoute();

                router.push || route.query

        8. pinia  :  状态管理工具

            8.1 pinia和vuex的区别

                1. pinia体积包比vuex小

                2. 使用pinia可以直接在组件中修改state数据

                3. vuex分模块modules，pinia不需要

                4. pinia中只有actions没有mutations

            8.2 pinia使用

                基础使用：https://xuexiluxian.cn/blog/detail/242b0ed71feb412991f04d448fc86636

                分模块：https://xuexiluxian.cn/blog/detail/8b3142cece05468994ef0f8c8e8b8021

                持久化存储：https://xuexiluxian.cn/blog/detail/acebacd99612447e8c80dcf6354240f6

        9. vue3 的 api参考

            网址： https://staging-cn.vuejs.org/api/

        10. 语法糖插件

            setup语法糖插件 ： unplugin-auto-import

            解决场景 ： 在组件中开发无需每次都引入 import { ref }..

            1. 下载安装

                npm i unplugin-auto-import -D

            2. 配置：vite.config.js中

                import AutoImport from 'unplugin-auto-import/vite'
                export default defineConfig({
                  plugins: [
                      AutoImport({
                          imports:['vue','vue-router']//自动导入vue和vue-router相关函数
                      })
                  ],
                })

        11. 组件传值

            看这个文章：https://xuexiluxian.cn/blog/detail/b8cfdb5272104735b518b9b0f0e189ed

        12. 依赖注入

            看这个文章：https://xuexiluxian.cn/blog/detail/e146232674194fc69448298cfba9240b

        13. 项目问题中

            13.1 一定要判断数据,要不然会出现短暂的空白

                

二、nuxtjs

    https://xuexiluxian.cn/course/detail/30f536da49504f158b9fc285971cee52

    web端项目：    

        客户端渲染 : 接口调用渲染页面 (前端和后端分离)
        服务端渲染 : 不用调用接口，走的模版引擎（前端和后端不分离）

    优缺点：
        1》网页开发的速度方面： 客户端  > 服务端
        2》对于seo一定是    ： 服务端  > 客户端

    SSR ： https://v3.cn.vuejs.org/guide/ssr/introduction.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9-ssr

    SSR vs 预渲染  : https://xuexiluxian.cn/course/detail/c5f17802f584418ababc325f54032397

    0. nuxtjs文件目录

        components    /放入组件    
        pages         /放页面(大组件)
        static        /静态资源(reset.css、img)
        store         /状态管理
        nuxt.config.js /配置文件
        

    1. 生命周期

        三大类：
            服务端生命周期
                nuxtServerInit、middleware、validate、asyncData
            服务端和客户端共同有的生命周期
                created、fetch
            客户端生命周期
                mounted...

    2. nuxtjs请求接口

        2.1 请求接口使用asyncData这个生命周期

            ***asyncData中没有this，需要return返回数据
            ***pages文件夹中的.vue文件使用

        2.2 fetch

            ***也可以请求接口，但是接口数据渲染到页面上，有时候有，有时候没有。

            ***内部可以写this

            ***fetch生命周期，在任何.vue文件中都可以

    3. 如何设置代理

        3.1 下载proxy

            npm install @nuxtjs/proxy -S

        3.2 在nuxt.config.js中进行配置

            axios:{
                //是否开启跨域
                proxy:true
             },
              proxy:{
                '/api':{
                      target:'http://testapi.xuexiluxian.cn/'
                }
              },
              modules: [
                '@nuxtjs/proxy',
            ],

    4. axios二次封装，api解耦

        4.1 下载axios

            npm install @nuxtjs/axios -S

        4.2 在nuxt.config.js中引入

            modules: [
                '@nuxtjs/proxy',
                '@nuxtjs/axios'
            ],

        4.3 api解耦

            a>配置: nuxt.config.js

                plugins: [
                    '~/plugins/axios',
                    '~/api/xxx.js'
                ],

            b>xxx.js中写入

                export default ({$axios},inject)=>{

                    inject('getFirstCategorys',()=>$axios({
                        url:'/api/course/category/getFirstCategorys',
                        method:'GET',
                    }))

                }
                
            c>页面或者组件请求

                async asyncData( app ){
                    let res = await app.$getFirstCategorys();
                    return {
                        list:res.data.list
                    }
                }

    5. 路由

        5.1 如何生成路由

            5.1.1 nuxtjs会自动生成路由

                参考：https://www.nuxtjs.cn/guide/routing

            5.1.2 用原来我们vue2的项目中的router/index.js

                a>下载

                    npm install @nuxtjs/router -S

                b>在nuxt.config.js配置

                    modules:[
                        '@nuxtjs/router'
                    ]

                c>把vue-cli中的router文件拷贝到nuxt项目根目录

                d>修改最后返回

                    export function createRouter(){
                        return new Router({
                          mode: "history",
                          routes,
                        });
                    }

        5.2 页面如何跳转

            template:
                跳转
                跳转
            js:和vue2一样 

        5.3 导航守卫

            ？？？？

    6. 组件传值

        vue2怎么写，nuxtjs就怎么写

    7. 状态管理store

        vue2怎么写，nuxtjs就怎么写

        注意store的返回不同，返回的是函数，这一点和router有点像

            import Vue from 'vue';
            import Vuex from 'vuex';

            Vue.use(Vuex);

            const state = {
                str:'这是store的数据'
            }

            //====== 开始

            const store = ()=> new Vuex.Store({
                  state
            });

            export default store;

            //====== 结束

    8. 项目上线

        1、首先执行npm run build

        2、将打包好的
        
            .nuxt
            static
            nuxt.config.js
            package.json
        　    这四个文件丢到服务器的某个文件夹中，在服务器上安装node环境

        3、在服务器上面执行npm install

        4、在服务器上面执行npm run start

            使用nginx做代理，想项目域名代理到localhost:3000上面就阔以用域名直接访问项目了；

            到此nuxt项目部署完成

    8. middleware ==> 中间件

        全局和局部

        8.1 全局

            nuxt.config.js中配置

            {
                middleware:['auth'],
            }

        8.2 局部的

            export default {
                  middleware:['auth'],
            }

            export default ( { route,redirect , store } )=>{
                // if( !false ){
                //     redirect('/login');
                // }
            }

三、重构项目( vue-cli 重构到nuxtjs 中 )

    
    3.1 代理=》解决跨域问题
    3.2 axios二次封装，api解耦
    3.3 router拿进去
    3.4 引入组件解决报错