vue3加nuxtjs

奈何我是个菜鸡

已于 2022-10-13 10:10:17 修改

阅读量4.5k

点赞数 2

文章标签： vue.js webpack javascript

于 2022-05-20 22:03:50 首次发布

本文链接：https://blog.csdn.net/m0_52374678/article/details/124891077

版权

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 :
                   <template>
                       <div ref="target">
                           <Foot v-if='targetIsVisible'></Foot>
                       </div>
                   </template>

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

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

4. 动态组件

vue2.x ==》 <components is='xxxx' />

vue3.x ==》 <component is='xxxx' />

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 一定要判断数据,要不然会出现短暂的空白

<el-carousel height="460px" v-if='sliders.length > 0'>

二、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:
               <router-link to='/my'>跳转</router-link>
           <nuxt-link to='/my'>跳转</nuxt-link>
       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 引入组件解决报错