IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> nuxt.js 进行项目重构-准备工作 项目分析 -> 正文阅读

[JavaScript知识库]nuxt.js 进行项目重构-准备工作 项目分析

目标:将一个 使用vue2.0开发的webAPP 的spa项目 使用 nuxt.js 重构成ssr 项目

nuxt的安装 和目录结构上文已经有提到

.nuxt:执行时依赖的文件 执行npm run start 或者 npm run dev时会生成

assers: 静态资源 存放 css img等

components 存放组件的文件夹

layouts 布局目录 类似 app.vue

middleware 中间件 类似导航守卫

node_modules 项目依赖的包

pages 页面组件的文件夹

store 状态树的文件夹(VueX)

nuxt.config.js 类似 main.js

?重构路由

nuxt.js 会根据?pages文件夹内的组件名称 自动生成路由

在进行项目重构时 直接使用原有 cli 当中的文件? 步骤如下:

1.下载

npm install @nuxtjs/router -s

2.在nuxt.config.js 中增加配置

modules: [
  '@nuxtjs/router',
],

3.把cli 中的router 文件拷贝到nuxt项目的根目录中(与nuxt.config.js 平级) 名字为 router.js

?最后返回有所不同

import Vue from 'vue'
import VueRouter from 'vue-router'
// 因为本来就是 服务端渲染 预渲染就 不需要了
import Home from "./pages/index";
...
//  省略导入对应的组件

Vue.use(VueRouter)

const routes = [
  {
    path:'',
    redirect:'/home'
  },
  ....
// 省略组件与路由对应的 路由表
]




//解决重复点击报错
const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}



//  在vue 脚手架中 这样导出
// const router = new VueRouter({
//   routes,
//   mode:'hash',
// })
// export default router

// nuxt.js 中这样导出
export function createRouter(){
    return new VueRouter({
    mode:'hash',
    routes
  })
}

项目的页面结构如下

pages 当中是页面组件 此项目有六个主要页面? ?搜索页面、购物车页面、分类页面、首页、个人中中心、首页

对应需要的组件 细分成文件夹 储存到 components 文件夹当中? ?

Vuex的相关准备

主要用于跨关系组件的数据传递

主要有两个模块

1.购物车相关? 在商品详情页将商品添加到购物车 (其实是将数据 存放到vuex中)进入到购物车页面展示这些数据? 并且处理回调交互? 全选多选 计算个数 结算时提交订单

2.搜索相关 搜索完成后跳转到 展示页面 中间的数据流经过vuex 掌控

?其他工具的准备

在原来的cli 中 下载包挂载到 main.js 中 进行引入就算全局挂载 但在nuxt.js 中 没有main.js 入口文件? 相关配置需要在 nuxt.config.js 文件当中配置

CSS

css: [
  '~assets/css/normal.css',
  'element-ui/lib/theme-chalk/index.css',
  'swiper/dist/css/swiper.css'
],

plugin

需要使用的插件 新建 plugin 文件夹 里面配置好相关插件的使用 再在 nuxt.config.js中使用

plugins: [
  '@/plugins/element-ui',
  {
    src:'@/plugins/swiper',
  //  ssr:false
  },
  '@plugins/bus',
  '@plugins/better-scroll',
  {
    src: '@/plugins/localStorage',
    ssr:false
  }
],

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-10-22 21:06:34  更:2022-10-22 21:07:58 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 17:39:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码