moedong / nuxt-iview Goto Github PK

nuxt.js+iview+koa2 实现SSR

JavaScript 86.10% CSS 1.51% Vue 12.39%

nuxt-iview's Introduction

nuxt-demo

最近公司CRM项目采用 nuxt+ivew+iview-admin+koa2的组合模式开发，目前正在踩坑中，demo还不完整，后面会继续更新

项目地址

git clone https://github.com/moedong/nuxt-iview.git

安装

npm install

开发

npm run dev

// GO to http://127.0.0.1:3000

测试环境

// 需要pm2，如果没有安装的先安装  npm install -g pm2
npm run publish:test

生产环境

// 需要pm2，如果没有安装的先安装  npm install -g pm2
npm run publish:prod

参考资料

nuxt-iview's People

Stargazers

Watchers

Forkers

sunweiconfidence makai1027 fozero yanxu1206 superman285 wupeng-engineer henqu zhu-jiayu tiger-liuhu tony0511 feixuezhang lgcxc

nuxt-iview's Issues

fsevents is not a constructor

执行yarn dev后报错

/Users/chen ray/Documents/project/nuxt-iview/node_modules/backpack-core/node_modules/chokidar/lib/fsevents-handler.js:26
return (new fsevents(path)).on('fsevent', callback).start();
^

TypeError: fsevents is not a constructor
at createFSEventsInstance (/Users/chen ray/Documents/project/nuxt-iview/node_modules/backpack-core/node_modules/chokidar/lib/fsevents-handler.js:26:11)
at setFSEventsListener (/Users/chen ray/Documents/project/nuxt-iview/node_modules/backpack-core/node_modules/chokidar/lib/fsevents-handler.js:80:16)
at FSWatcher.FsEventsHandler._watchWithFsEvents (/Users/chen ray/Documents/project/nuxt-iview/node_modules/backpack-core/node_modules/chokidar/lib/fsevents-handler.js:244:16)
at FSWatcher. (/Users/chen ray/Documents/project/nuxt-iview/node_modules/backpack-core/node_modules/chokidar/lib/fsevents-handler.js:378:25)
at LOOP (fs.js:1570:14)
at process._tickCallback (internal/process/next_tick.js:61:11)

展开的菜单栏点击其他的链接时自动收起

将 iview的版本升级到 2.14.0-rc.1 即可解决

关于tinymce在ssr下拿不到bom的navigator ？

你好，
我看你在文章发布页面注释了tinymce，解决了么？😂

localStorage is not a function

nuxt.config.js 设置 ssr 为 true

plugins: [
{ src: '~plugins/flexible.js', ssr: false },
{ src: '~plugins/iview.js', ssr:true }
],

在 layout/default.vue :

将有关 localStorage的操作放在 mounted 中，不能放在 created里面，因为created方法里面，node端渲染和浏览器端都会执行，node环境没有localStorage。

参考：https://segmentfault.com/q/1010000011016483/a-1020000011998745

刷新页面时，菜单导航自动收起

页面组件使用包裹

pages下新建页面怎样才能不使用iview-admin框架样式，如 login.vue

layouts 下创建一个简单无样式的 full.vue 文件

<template>
  <div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <nuxt/>
  </div>
</template>

然后在 login.vue 里面layout指定上面的full即可

export default {
  layout: 'full',
  .....

主题css为啥没有打包进来？

npm run dev error in ./.nuxt/client.js

in ./.nuxt/client.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin 0 specified in "/Users/racaly/workspace/nuxt-iview/node_modules/@nuxtjs/babel-preset-app/index.js" provided an invalid property of "default" (While processing preset: "/Users/racaly/workspace/nuxt-iview/node_modules/@nuxtjs/babel-preset-app/index.js")

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render

解决办法：

1、使用标签包裹组件
2、nuxt.config.js 中设置 plugins: [{ src: '~plugins/iview.js', ssr: true }]， ssr设置为true