nuxt SSR 学习笔记
自定义文件夹 nuxt.config.js
dir: {
assets: 'custom-assets',
app: 'custom-app',
layouts: 'custom-layouts',
middleware: 'custom-middleware',
pages: 'custom-pages',
static: 'custom-static',
store: 'custom-store'
}
layouts // 创建布局模板
一. layouts文件夹下 建一个vue文件 比如 BaseLayout.vue //项目默认是default.vue
二.里面的内容
<template>
<div>
<div>头部</div>
<Nuxt></Nuxt>
<div>底部</div>
</div>
</template>
三.页面里面引入
export default {
layout:'BaseLayout'
}
nuxt 路由
一 nuxt 路由是自动生成的 _nuxt目录的 router.js 不需要额外配置
1.子路由 是在page里面新建文件夹创建a.vue
2.嵌套路由 新建文件夹里面必须有一个同名的.vue文件
比如user 目录下 user.vue a.vue b.vue 这样的话 a b 路由 就在user的子路由里面
3.动态路由 下划线+字段 _id.vue
nuxt 跳转
1. a标签跳转 会刷新页面 不推荐
2. <nuxt-link to="{name:'list',params:{id:2},query:{key:3}}">点击跳转</nuxt-link>
3.<button @click="btn">js跳转</button>
methods:{
btn(){
this.route.push('/list') //同vue一样
}
}
跳转接收参数
可以通过共同的生命周期 created(){} beforeCreated(){}
created(){
this.route
this.route.params
}
二.使用router.js 不使用nuxt路由自动生成
1.下载 @nuxtjs/router npm i @nuxtjs/router -S
2.下载完成之后在nuxt.config.js的moudles模块进行配置
modules:[
'@nuxtjs/router'
]
3.把router文件放入nuxt项目根目录
router.js
4.修改导出的配置荐
const router = new VueRouter({
mode:'history',
routers
})
export function createRouter(){
return router;
}
路由守卫
一.router.js的路由守卫
1.1全局前置守卫
router.beforeEach((to,from,next) => {
if(to.name='home'){
next('/news');
}else{
next();
}
})
1.2 独享守卫
beforeEnter(to,from,next){ //组件内的守卫
console.log(localStorage) //获取不到 因为 beforeEnter 走的是服务端
next()
}
导航守卫
1.router.js 和vue-cli的路由 几乎差不多
2.
1.中间件 : middleware
全局
局部
2.插件 :pulgins (nuxt.config.js) 全局
plugins:[
'~/plugins/router.js'
]
新建文件 plugins/router.js
export default ({app}) => {
console.log(app)
app.router.beforeEach((to,from,next) =>{
console.log(to);
next();
})
}
********补充:服务端不能使用localstorage和cookie的解决方案
1.参数链接: https://www.npmjs.com/package/
cookie-universal-nuxt
1.安装下载
npm i --save cookie-universal-nuxt
用 vuex-persistedstate 来持久化数据
npm install vuex-persistedstate --save
2.nuxt.config.js进行配置
modules:[
'cookie-universal-nuxt'
]
3.正常使用
this.$cookies.set()
this.$cookies.get()
...
配置header
1.组件局部: 在vue页面中
export default {
head() {
return {
title: "youmeShop-list",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "list" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
};
},
};
</script>
配置css
nuxt.config.js
css[
'相对路径'
]
如果需要使用sass 需要安装 npm install --save-dev sass sass-loader@10
某个页面或组件可以使用
<style scoped lang='scss'>
ul{
color:red;
li{
font-size:14px;
background-color:blue;
}
}
</style>
样式自适应
一.flexible.js放在nuxt项目static工程下:
二安装 执行:npm install postcss-pxtorem
三. flexible.js配置在nuxt.config.js里面
script: [
{src:'js/flexible.js',type:"text/javascript",charset:'utf-8'}, //px to rem配置
],
四.配置postcss
build: {
postcss: {//rem配置
'postcss-pxtorem': {
rootValue: '37.5',
propList: ['*'],
selectorBlackList: ['mint-']
}
}
},
一 安装nuxt的内置 axios 优先
1.1 npm install @nuxtjs/axios -S 手动安装
1.2 nuxt.config.js进行配置
modules: [
'@nuxtjs/axios',
],
二安装axios 类似于vue的用法
2.1 npm install axios -S
2.2 需要用的页面 引入 import 'axios' from 'axios'
nuxt设置代理
1.安装
npm install @nuxtjs/axios -S
npm i @nuxtjs/proxy -S //代理
2.配置
modules:[
'@nuxtjs/axios',
'@nuxtjs/proxy',
]
axios:{
//是否可以跨域
proxy:true,
retry:{retries:3},//重发次数 非必须
baseUrl:process.env._ENV == 'production'?''//生产环境 开发环境 非必须
}
proxy: {
'/api/': {
target: 'https://www.youmeit.shop', // 请求得对方地址
changeOrigin: true,
PathRewrite:{
'^/api/':'',
}
}
},
vuex辅助函数的例子
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
computed: {
// count(){
// return this.$store.state.count;
// },
// filteredList() {
// return this.$store.getters.filteredList;
// },
...mapState({
count: state => state.count
}),
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'filteredList'
])
},
//mapMutations 使用方法一
// ...mapMutations([
// 'increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
// ]),
//mapMutations 使用方法二
...mapMutations({
increase: 'increase'// 将 `this.increase()` 映射为 `this.$store.commit('increase')`
})
...mapMutations(['str1','str2']) //多个字段映射
loading配置
一.nuxtjsloading 默认是开启的 也可以关闭
nuxt.config.js中 loading:false
二.也可以自定义
loading: '~/components/loading.vue'
三。也可以不用nuxt的loading loading:false 自己在axios中进行封装
一.目录结构
page : 存放页面
components :存放组件
static :存放静态资源
store :vuex状态树
nuxt.config.js : 全局的配置文件
二.服务端生命周期
1.1 nuxtServerInit(store,context) {
console.log('nuxtServerInit');
}
参数1:vuex上下文
参数2:nuxt上下文
1.2 Middleware 中间件 在middleware 目录 创建 auth.js 类似vue中的导航守卫
全部引用 在nuxt.config.js router里面配置
router:{
middleware:'auth'
}
局部引用 在需要引入的页面引入中间件 middleware:'auth'
1.3 validate({params,query}){} //校验传递的参数是否正确
1.4 asyncData({store,params,$axios}){ return {title:data.title}} 限于页面组件(page目录下的文件) 在页面加载前执行 请求数据 asyncData 没有this this 是undefined
1.5 fetch({app,store,params}){} 可以在页面和组件中使用 用于填充状态(store)树数据 它不会设置组件数据 fetch 是有this
三 服务端和客户端共有的生命周期
beforeCreate(){}
create(){}
四 客户端的生命周期
和vue的生命周期一样
beforeMounte
mounted
beforeUpate
updated
beforeDestroy
destroyed
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库
npm i qs
import qs from 'qs'
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式,以&进行拼接
let data = qs.stringify({
"username":this.username,
"password":this.password
});
重构笔记
一.创建项目 npx nuxt-create-app demo
二.配置vue-cli路由 上文用自己的路由有讲解
三.请求接口 设置代理
1.安装 @nuxtjs/axios @nuxtjs/proxy -S
2.nuxt.config.js 配置
modules:[
'@nuxtjs/axios',
'@nuxtjs/proxy'
]
axios:{
//是否可以跨域
proxy:true,
retry:{retries:3},//重发次数 非必须
baseUrl:process.env._ENV == 'production'?''//生产环境 开发环境 非必须
}
proxy: {
'/api/': {
target: 'https://www.youmeit.shop', // 请求得对方地址
changeOrigin: true,
PathRewrite:{
'^/api/':'',
}
}
},
四. vuex安装配置
vue-li里面的state 要改成 返回的是方法
export const state = () => ({
token: '00000000',
str:'889900',
})
五.引入你所需的插件
加密 解密 crypto-js (封装加密 解密)
UI框架(elementUI vant bootstrap)
六.token的持久化存储(上文中有介绍 cookie-universal-nuxt)
static 不会经过webpack打包编译
assets 反之
加载更多:
vue-infinite-scroll
一.安装 npm install vue-infinite-scroll --save
二. 引入 (main.js )
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
三.vue页面里面
v-infinite-scroll="handleInfiniteOnLoad"//页面滚动的回调函数
:infinite-scroll-disabled="busy"//false表示执行handleInfiniteOnLoad,true表示不执行
:infinite-scroll-distance="10"//页面滚动到离页尾多少像素的时候触发回调函数
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div v-for="item in data" :key="item.index">{{item.name}}</div>
</div>
data () {
return {
count: 0,
data: [],
busy: false
}
}
methods: {
loadMore: function() {
//调用ajax,当获取到最后一组数据时,this.busy = false
this.busy = true
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({name: this.count++ })
}
console.log(this.data)
this.busy = false
}, 1000)
}
}
nuxt 项目 局域网访问的设置
package.json
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库