nuxt 重构已有vue项目使用心得

用现有的vue-cli 项目 改成 nuxt 项目 真的是废了 好大的劲

因为之前的项目是中大型项目 重新改成html css 可能废很大工作量这次采用nuxt 框架来重新构架

因为2个项目都是基于vue 编写

1.将之前的src 文件夹 整个拖进去

在nuxt.config.js 引入

srcDir: "src/"

2.关于window 和 localStorage 尽量少用

  1. 用 process.browser 判断 process.browser ? token = localStorage.getItem('loginToken') : ''

2)用 js-cookie 来管理缓存 import * as Cookies from 'js-cookie'

  1. 使用vue-awesome-swiper

这个坑很多 最后引用成功 轮播图就是 竖向展示 没有轮播效果最后还是 到网上找到文章解决了

我的配置如下

版本

"vue-awesome-swiper": "^3.1.3"

复制代码
import Vue from 'vue'

if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper')
  Vue.use(VueAwesomeSwiper)
}

nuxt.config.js

'swiper/dist/css/swiper.css',

'~/plugins/vue-swiper.js',

4.路由 router

我这边是用的router组件 没有用到page 因为是在原有的项目里重构 就使用router.js

安装"@nuxtjs/router": "^1.7.0"

根目录添加 router.js

router.js

路由配置

javascript 复制代码
export function createRouter() {
    return new Router({
        mode: "history",
        routes: routes,
    });
}

routes

component 这个引用尝试了很多办法 只有一种办法成功了 不然会报错运行不了

其他更简便的方法也在尝试

nuxt.config.js

javascript 复制代码
'@nuxtjs/router',

6.vuex store 使用cookie的坑 刷新页面会丢失

解决方法参考:前端废物的自救之路(3)使用Cookie完成Nuxt.js中Vuex的持久化

相关推荐
Jinuss8 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海8 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手9 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪12 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪14 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__16 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工19 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主21 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat22 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee27 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能