标签Nuxt

基于Vue2,支持Vue Router,Vuex,Vue Server Renderer(spa),Vue-meta

https://zh.nuxtjs.org/
https://www.nuxtjs.cn/

1,模版安装
https://github.com/nuxt-community/koa-template
vue init nuxt-community/koa-template <project-name>
cd <project-name> # move to your project
需将nuxt降级到1.4.2
npm install # or yarn install*[see note below]

npm i eslint-plugin-html@^3

2.脚手架安装
npm install -g npx
（npx在NPM版本5.2.0默认安装了）：
$ npx create-nuxt-app <项目名>

rendering mode :Universal ->否开启SSR服务端渲染

$ cd <project-name>
$ npm run dev 运行开发模式

npm run build 打包构建
npm start 正式运行

npm install --update-binary 重新编译

问题一:使用ES6的 import/export,不支持import需使用babel

解决方案：
    1 在启动参数中加上  --exec babel-node
    2 在根目录下增加.babelrc配制文件
    {
        "presets":["es2015"]
    }
    3 npm install babel-preset-es2015
    npm install babel-cli -S

    deprecated babel-preset-es2015@6.24.1: ????  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
+ babel-preset-es2015@6.24.1
failed to start process, "babel-node" exec not found

Module build failed:Error:Plugin/Preset files are not allowed to export objects
1 删除    npm uninstall –save babel-loader
npm uninstall –save @babel/core
    2 新安装    npm install –save -dev babel-loader@^7

问题二：安装 sass

安装依赖
 "fibers": "^4.0.2","sass": "^1.26.3"
Windows + OS X instructions here: https://github.com/nodejs/node-gyp
Ubuntu users please run: `sudo apt-get install g++ build-essential`
RHEL users please run: `yum install gcc-c++` and `yum groupinstall 'Development Tools'`
Alpine users please run: `sudo apk add python make g++`
OS
xcode-select --install
后出现错误
xcode-select: error: command line tools are already installed, use "Software Update" to install updates
解决办法：
1.使用softwareupdate --list查看可用的内容，然后softwareupdate --install -a安装所有更新或softwareupdate --install <product name>只安装Xcode更新。

2.$ rm -rf /Library/Developer/CommandLineTools
$ xcode-select --install

3. Apple 官网下载最新版本的Command Line Tools安装即可
https://developer.apple.com/download/more/
通过brew config查看当前CLT版本号是否变更
CLT: 1103.0.32.62 -> 11.5.0.0.1.1588476445
Xcode: 11.4


npm install  sass fibers

This relative module was not found:
** npm install sass-loader node-sass**
安装后可以会有提示：
npm WARN acorn-jsx@5.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-vue@4.7.1 requires a peer of eslint@^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

此时，需要安装：
$ npm i eslint@^3.18.0
$ npm i acorn@^6.0.0
3. 修改 nuxt.config.js
css: [
    'element-ui/lib/theme-chalk/reset.css',
    'element-ui/lib/theme-chalk/index.css'
],
...
build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    cache: true
}

配置sass编译 lang="scss"
yarn add @nuxtjs/style-resources node-sass sass-loader
nuxt.config.js文件添加代码
   modules: [
        '@nuxtjs/style-resources'
    ],

Module build failed (from ./node_modules/eslint-loader/index.js): friendly-errors 23:51:12
TypeError: Cannot read property ‘eslint’ of undefined
at Object.module.exports (/Users/sweet/Desktop/IDEA_project/vue/nuxt/node_modules/eslint-loader/index.js:148:18)

解决方案：
1     npm install eslint-loader@2.1.2 –save -dev
最后再次执行就没问题了。
初始化的版本太旧,升级
“backpack-core”: “^0.8.4”,
“eslint”: “^3.19.0”,
“eslint-config-standard”: “^10.2.1”,
“eslint-loader”: “^2.1.1”,

常用组件

npm i koa-router
npm install --save axios
npm i -g webpack webpack-cli

数据渲染

 async mounted() {
      // mounted在服务端渲染时不会被执行,页面源码不会渲染有数据,只会在浏览器中发生效果
      // let self = this
      // let {status, data: { list }} = await axios.get('/city/list')
      // if (status === 200) {
      //   self.list = list
      // }
    },
    async asyncData() {
      let {status, data: { list }} = await axios.get('http://localhost:3000/city/list')
      if (status === 200) {
        return { list }
      }
    }

fetch 用于vuex

报错Error:Interface ‘NuxtApp’ incorrectly extends interface ‘Vue’

https://github.com/nuxt/typescript/issues/49 类似，element-ui的$loading和nuxt.js 中的$loading冲突导致,临时解决方法

tsconfig.json
"compilerOptions": {
    "skipLibCheck": true
}

配置请求的baseUrl参数

    nuxt.config.js文件添加代码
   env: {
        baseUrl: process.env.NODE_ENV == 'development' ? 'http://localhost:3000/mapi' : 'http://www.ddd.cn'
    }
    测试 test.js 文件
    任何文件都可以使用 process.env.baseUrl
import Http from '@/plugins/http/index'; // 封装axios请求
let API = process.env.baseUrl;
     // 文章列表
    getArticleList(params = {}) {
        let url = `${API}/api/article/weblist`;
        return Http.get(url, params)
    },

Window 或 Document 对象未定义？

npm install --save window
那个js文件有window就在那个文件添加一下代码
// 客户端
if (process.client) {
...your code
}
// 浏览器
if (process.browser) {
...your code
}
例子： 以wowjs为例子
if (process.browser) {
var { WOW } = require("wowjs");
}
if (process.browser) {
let wow = new WOW({
live: false
});
wow.init();
}
or
在webpack.base.config.js下的output中添加一条globalObject: 'this'
or
(function(window) {
/* Keep source code the same */
// })(typeof window == "undefined" ? global : window);
// or
})(this);
nuxt.js.config
plugins: [
'@/plugins/element-ui',
// '@/plugins/adapter-latest',
{src: '@/plugins/adapter-latest', ssr: false}
],