Vue全家桶+SSR+Koa2全栈开发美团网⑥——实战准备

npx create-nuxt-app <项目名>

安装选项

因为node的运行环境不支持es6的import from,所以需要babel进行转换，在dev和start下加入--exec babel-node

  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate"
  }

还需要根目录下创建.babelrc文件，写入

{
  "presets": ["es2015"]
}

还需安装babel-core babel-preset-es2015 babel-cli

npm i babel-core babel-preset-es2015 babel-cli

安装scss依赖包

npm i sass-loader node-sass

nuxt.config.js中修改默认element-ui样式，build中加入cache: true

cache: true的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

这里可能会有不兼容，所以改成cache: false

  css: [
    'element-ui/lib/theme-chalk/reset.css',
    'element-ui/lib/theme-chalk/index.css',
    '~assets/css/main.css'
  ],
  build: {
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    },
    cache: true
  }

nuxt.js启动后报错htmlelement is not defined解决方法

nuxt.config.js中将element-ui变为对象，取消ssr渲染

  plugins: [
    // '@/plugins/element-ui'
    { src: '@/plugins/element-ui', ssr: false }
  ],