vue3加nuxtjs
vue-cli版本：vue2.xvue-router 3.xvuex 3.x最新vue3.xvue-router 4.xvuex 4.xpc端的项目seo优化 ：多页面，title、右击查看源代码数据是在页面：单页面（spa） ==> 多页面？渲染模式：客户端渲染===> [服务端渲染]1. vue2.x ==> vue3.x2和3版...
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 -Dd> 在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 引入组件解决报错
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)