初学Nuxt， 以下如有不对请指出谢谢！
- Nuxt环境搭建框架
npx create-nuxt-app <项目名> - 根据自己需求选择 UI框 服务器 测试框架等
- Nuxt配置端口号，在根目录的Package.json文件里面修改IP和端口号
"config": {
"nuxt": {
"host": "localhost",
"port": "2345"
}
}
- 安装axios // npm install @nuxtjs/axios -d
配置 nuxt.config.js 可根据自己项目需求配置 是否跨域 安装@nuxtjs/proxy
modules: [
'@nuxtjs/axios'
],
axios: {
prefix: '/',
proxy: false // Can be also an object with default options
},
server: {
port: 2345, // default: 3000
host: 'localhost' // default: localhost
},
head配置项里配置可以配置meta标签相当于html的head
部署完网站，查看源码发现里面有一段window.__nuxt=，去除方法查到两种
- 百度搜索好多都是改源码（貌似有副作用）
nuxt2.7.1版，路径：\node_modules\nuxt\node_modules@nuxt\core\node_modules@nuxt\vue-renderer\dist\vue-renderer.js
// 注释代码1， 禁止在页面初始化时添加window.__NUXT__代码
APP += `<script>${serializedSession}</script>`;
// 注释代码2 禁止在页面路由改变时更新window.__NUXT__代码
hash.update(serializedSession);
cspScriptSrcHashes.push(`'${csp.hashAlgorithm}-${hash.digest('base64')}'`);
2 通过工具包cheerio操作dom找到window.__nuxt，然后移除。
npm install cheerio //安装cheerio包
// 修改nuxt.config.js
const cheerio = require('cheerio');
export default {
hooks: {
'render:route': (url, result) => {
this.$ = cheerio.load(result.html, { decodeEntities: false });
//由于window.__nuxt__总是位于body中的第一个script中，
//所以我移除了body中第一个脚本标签
this.$(`body script`).eq(0).remove();
result.html = this.$.html()
}
}
}
解决ElementUI默认英文问题
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, { locale })
nuxt 引入 swiper
npm install swiper vue-awesome-swiper --save
package.json中可以看到插件版本(高版本swiper 分页器和自动播放可能不显示，不知后来有没有更新）
image.png
在plugins中新建vue-swiper.js文件，并保存以下内容：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在nuxt.config.js配置文件中添加如下内容
css: [
'swiper/css/swiper.css' // 5.x
],
plugins: [
'@/plugins/vue-swiper'
],
注意 - 官方对于不同版本配置有说明
image.png
