Nuxt.js ---- 基于 Vue.js 的服务端渲染应用框架(实战篇一)_详解基于vue的服务端渲染框架nuxt-程序员宅基地

学习目标：

1.（注意）Nuxt官方网站自己先看(https://www.nuxtjs.cn/guide)

2.搭建站点基本框架

（一）创建Nuxt.js项目：

//打开终端
yarn create nuxt-app <项目名>

//项目暂时不使用UI框架，尽量轻量化

下图为本次实战项目的配置：
在这里插入图片描述

(二)：浅谈下目录结构和配置

官方网站也有相关说明，我就大概说下

在这里插入图片描述

(三)：进行一些全局的配置

1.css全局配置

在项目根目录中新建assets文件夹，将一些常用到的选择器样式统一写在一个default.css文件里面。这样会令你在开发中事半功倍，得心应手。

分享下我自己常用的一些相关样式
点击访问

注意：记得在Nuxt.config.js中把刚刚新增的文件加进去，这样才会在全局中起效！！！

在这里插入图片描述

2.项目部署环境统一配置

根据环境的不同（分为生产环境，测试环境，开发环境），在package.json中添加相应的请求地址、图片地址、Websocket地址等等

在这里插入图片描述

注意：记得在Nuxt.config.js中把刚刚新增的环境对象加上，这样才会在全局中起效！！！

process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息

在这里插入图片描述

今天先到这了（看看成果）：

1.配置的全局样式在任何一个.vue文件中都能生效；

在这里插入图片描述

2.环境变量在全页面/组件中可读取；

在这里插入图片描述

git项目地址

今天就先到这了，明天讲layouts布局

本文链接：https://blog.csdn.net/weixin_43523043/article/details/125587896

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Python 加密解密_咕咕加密v4-程序员宅基地

文章浏览阅读1k次。# -*- coding: utf-8 -*-import hashlib'''加密解密'''#MD5是最常见的摘要算法，速度很快，生成结果是固定的128 bit字节，# 通常用一个32位的16进制字符串表示。md5 = hashlib.md5()update = md5.update('hhhhhaaa')print(md5.hexdigest())#SHA1的结果是160..._咕咕加密v4

使用cesium primitive api绘制三维插值图，热力图_cesium 插值点-程序员宅基地

文章浏览阅读1.4k次，点赞3次，收藏13次。【代码】使用cesium primitive api绘制三维插值图。_cesium 插值点

flask + pyecharts 疫情数据分析搭建交互式动态可视化疫情趋势分析、舆情监测平台（附代码实现）_疫情舆情分析代码-程序员宅基地

文章浏览阅读978次，点赞3次，收藏21次。该项目是浙江大学地理空间数据库课程作业8：空间分析中，使用 flask + pyecharts搭建的简单新冠肺炎疫情数据可视化交互分析平台的一部分，完整的实现包含疫情数据获取、态势感知、预测分析、舆情监测等任务；包含完整代码、数据集和实现的github地址： https://github.com/yunwei37/COVID-19-NLP-vis项目分析报告已部署到网页端，可点击 http://flask.yunwei123.tech/ 进行查看，数据已更新到6.17本项目采用flask作为_疫情舆情分析代码

python之09-tuple元组-程序员宅基地

文章浏览阅读254次。详细请参考：https://www.cnblogs.com/Neeo/articles/11212374.html1、元组的基本操作1>创建元组Python中，元组（tuple）用一对小括号()表示，元组内的各元素以逗号分隔。t = ()print(type(t)) # <type 'tuple'>t1 = ('name', )print(t1) ..._tuple元祖for循环取值

c语言程序怎样生产dll文件,关于c语言创建dll文件及dll文件的调用-程序员宅基地

文章浏览阅读860次。关于c语言创建dll文件及dll文件的调用近来又有人在群里问如何用c语言编制dll文件(动态链接库)。原来没有对这个问题太在意过，也没有尝试过任何解决方案，毕竟原来我是用vb的(现在用.net)，做个dll只不过是点选一下建立activeX dll工程的图标而已。今天在网上与朋友聊天，看了他指给我的几个几个文件，用MingW将C程序编译成dll文件的例子，我恍然大悟，原来讲C程序编译成dll文件只..._keil c语言生成dll

【学习笔记】基于遗传算法的BP神经网络优化算法_遗传算法优化 bp 染色体-程序员宅基地

文章浏览阅读6.8k次，点赞11次，收藏111次。一、背景介绍BP神经网络是一类多层的前馈神经网络。它的名字源于在网络训练的过程中，调整网络的权值的算法是误差的反向传播的学习算法，即为BP学习算法。BP神经网络是人工神经网络中应用广泛的算法，但依然存在着一些缺陷，例如学习收敛速度太慢、不能保证收敛到全局最小点、网络结构不易确定等。另外，网络结构、初始连接权值和阈值的选择对网络训练的影响很大，但是又无法准确获得，针对这些特点可以采用遗传算法对神经网络进行优化。二、算法流程创建网络；确定网络的初始权重值和阈值，对其进行编码得到初始种群；while_遗传算法优化 bp 染色体

随便推点

二、Json对象、Json数组和Json字符串_json字符串数组-程序员宅基地

文章浏览阅读6.7k次，点赞3次，收藏17次。一、Json字符串和Json对象定义：1、Json字符串：所谓字符串：单引号或者双引号引起来，是一个String类型的字符串：如下：var person='{"name":"shily","sex":"女","age":"23"}';//json字符串console.log(person)console.log(person.name)console.log(typeof person) 2、Json对象：最显著的特征：对象的值可以用 “对象.属性” 进行访问，_json字符串数组

Linux系统100条命令：关于Ubuntu和 CentOS 7 相同功能的不同的终端操作命令_ubuntu 命令跟centos-程序员宅基地

文章浏览阅读718次。CentOS 7：ip link set interface_name up 或 ip link set interface_name down。Ubuntu：ifconfig interface_name up 或 ifconfig interface_name down。CentOS 7：编辑 /etc/sysconfig/network-scripts/ifcfg-eth0 文件。Ubuntu：编辑 /etc/network/interfaces 文件。_ubuntu 命令跟centos

windows10下VS2019编译jpegsrc.v9e.tar.gz为lib静态库（已验证）_jpeg library error vs2019-程序员宅基地

文章浏览阅读652次。jpegsr9e windows vs2019生成方法，以及库下载_jpeg library error vs2019

重磅？华为 Mate60/Pro 系列网速实测结果公布，最高 1205.57 Mbps_华为mate60pro+核实网络-程序员宅基地

文章浏览阅读647次。总的来说，华为Mate 60/Pro系列手机的高速网速表现引起了广泛的关注，这也是消费者对该系列手机购买热情高涨的一个重要因素。可以看出，华为Mate 60/Pro系列手机的网速表现非常出色，这也是消费者购买该系列手机的一个重要原因。此前，华为Mate 60 Pro的供应量已经增至1500万至1700万台，而最新消息称，华为Mate 60 Pro和Mate 60 Pro+的出货量甚至已上调至2000万台。目前，在中国市场上，手机竞争愈发激烈，不仅华为Mate 60系列，其他品牌的手机也都受到了高温的迎接。_华为mate60pro+核实网络

access查找出生日期年份_access怎样利用出生日期计算年龄呀！-程序员宅基地

文章浏览阅读7.1k次。公告：为响应国家净网行动，部分内容已经删除，感谢读者理解。话题：access怎样利用出生日期计算年龄呀！回答：lt;%set rs = server.createobject(＂adodb.recordset＂) curid=request(＂id＂) sql = ＂UPDATE pany SET a_num=a_num+1,day_count=day_count+1 WHERE day_lda..._access出生年份表达式

python 内置函数-程序员宅基地

文章浏览阅读75次。Python内置函数(1)——absPython内置函数(2)——divmodPython内置函数(3)——maxPython内置函数(4)——minPython内置函数(5)——powPython内置函数(6)——roundPython内置函数(7)——sumPython内置函数(8)——bool...