学习目标:
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.环境变量在全页面/组件中可读取;