Nuxt.js
基于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}
],