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
  }
],