目标:将一个使用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
  }
],