nuxt.js项目入门配置篇
时间:2022-07-24
本文章向大家介绍nuxt.js项目入门配置篇,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- 初始化项目
vue init nuxt/starter
yarn install
yarn run start
- 设置ip和端口号,在package.json中添加config
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
}
设置端口号.png
- 每个页面设置不同的title和ico
// 设置每个页面的title 和ico,(每个页面就是一个页面,页面都有head这个钩子函数。)
head() {
return {
title: "新闻页面",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "Nuxt.js project" },
{ name: "renderer", content: "webkit" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon1.ico" }],
};
},
title和ico.png
- 样式初始化(引入reset.css)
css: [
'~assets/css/reset.css', 'element-ui/lib/theme-chalk/index.css'
],
在assets中创建css文件夹,在里面创建reset.css文件,然后在nuxt.config.js中引入。
样式初始化.png
- 引入element-ui 第一步: 安装 yarn add element-ui --save 第二步:在plugins文件夹中创建element.js,然后添加代码, 第三步:在nuxt.confing.js中引入文件,修改配置。 第四步: 在vue组件中直接使用,ui的组件。
代码一.png
代码2.png
- 设置默认404页面 在layouts中添加error.vue文件就是默认的404页面或者500页面。
error.png
- 页面的接口请求 asyncData asyncData优先于所有的钩子函数。
// 服务端接口请求
async asyncData() {
// 如何在这里发送多个请求,数据返回出去就是直接绑定在this上
//服务端渲染,接口统一在这里请求数据
const siteConfigResult = await axios.post(
"/navigation/rubik/detail",
{ rubikId: 5, type: 5 }
);
// console.log(siteConfigResult.data.result.randomData);
let list = siteConfigResult.data.result.randomData;
const postsResult = await axios.post(
"/navigation/rubik/detail",
{ rubikId: 5, type: 5 }
);
// 对象解构的形式
const { data } = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
const { bodyList } = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
// console.log(bodyList);
// console.log( bodyList );
let list2 = postsResult.data.result.randomData;
// 返回的数据直接绑定在this上
return {
list,
list2,
posts: data.slice(0, 5),
};
},
asyncData.png
- 打包静态文件 yarn run generate,打包后会出现一个dist文件夹,给运维发布即可。 特别提示: “~”就相当于定位到了项目跟目录,这时候你的图片路径就不会出现错误,就算打包也是正常的。
- Linux进程监控工具Supervisor简易使用教程
- (29) 剖析String / 计算机程序的思维逻辑
- (27) 剖析包装类 (中) / 计算机程序的思维逻辑
- Python量子力学计算模拟以及数据可视化
- (26) 剖析包装类 (上) / 计算机程序的思维逻辑
- (25) 异常 (下) / 计算机程序的思维逻辑
- (24) 异常 (上) / 计算机程序的思维逻辑
- Python3.6新特性官方文档中文版
- (23) 枚举的本质 / 计算机程序的思维逻辑
- (22) 代码的组织机制 / 计算机程序的思维逻辑
- Python开发微信公众号后台(系列二)
- (21) 内部类的本质 / 计算机程序的思维逻辑
- (20) 为什么要有抽象类? / 计算机程序的思维逻辑
- Python云计算框架:Openstack源码分析之RabbitMQ(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微服务的用户认证与授权杂谈(上)
- Python 技术篇-win32、amd64结尾的whl库该选哪个,如何查看python平台支持
- Python 基础篇-pip卸载python库方法,pip命令大全
- Python 技术篇-pip安装的python库缓存位置查看方法,如何查看python库源码
- Redis持久化 - RDB和AOF
- Python 技术篇-pip只下载python库不安装方法,pip命令大全
- Python 技术篇-将项目打包成whl文件,whl包的制作方法
- PowerBI 超级粘性用户计算 - 原理与实现
- Chrome 技术篇-常用web调试手法:清除缓存并硬性重新加载
- 数据库之索引模块
- Python 爬虫篇-爬取web页面所有可用的链接实战演示,展示网页里所有可跳转的链接地址
- Python爬虫,微信公众号话题标签内容采集打印PDF输出
- Windows 技术篇-设置dns提升网速,刷新dns缓存
- 搭建高可用的Replication集群归档大量的冷数据
- Python 技术篇-文件操控:文件的移动和复制