Nuxt-Notes
Nuxt-Notes copied to clipboard
cssmagic
Nuxt 学习笔记，涵盖 Nuxt 3 和 Nuxt 2。
## 文件组织 所有写在 Vue 组件之外样式代码，统一存放在 `@/assets/css/` 目录下。 ## 预处理语言 统一采用 SCSS 作为 CSS 预处理语言。 可选择 Node Sass ([node-sass](https://www.npmjs.com/package/node-sass)) 和 Dart Sass ([sass](https://www.npmjs.com/package/sass)) 两者之一作为 SCSS 的编译引擎。前者已经被 Sass 官方宣布废弃，且安装过程不稳定，不推荐使用。在通常情况下建议选用后者，安装更简便，功能更新、更全。 Nuxt 项目必须安装 [sass-loader](https://www.npmjs.com/package/sass-loader)...
> 参见 [本仓库内的 `/example/nuxt2/package.json` 文件](https://github.com/cssmagic/Nuxt-Notes/blob/master/example/nuxt2/package.json)。 ## 运行依赖 * `nuxt` —— 主框架。取 2.x 版本，内置 Vue 2。 * `element-ui` —— 组件库。取 2.x 版本，兼容 Vue 2。 * `@nuxtjs/axios` —— Nuxt 封装的 Axios，用于在服务端和客户端请求接口。 *...
## 目录结构 * `layouts/` —— 应用的布局组件。 * `pages/` —— 页面级组件。Nuxt 会根据其内部结构来生成路由，即传说中的 “约定式路由”。 * `components/` —— 应用的非页面级组件。所有组件会被 Nuxt 自动注册为全局组件，可以在任意组件的模板中直接使用。 * `assets/` —— 待编译的静态资源。在 JS 代码中可通过 `@/assets/` 来引用此目录中的资源；在 CSS 代码中通过 `~@/assets/` 来引用。...
## 编辑器配置 ### 识别路径别名 不论是 Vue CLI 还是 Nuxt，都定义了一些路径别名，可用于以下四种场景： ```html import * as util from '@/assets/js/util' @import "~@/assets/css/base.scss"; .bg { background-image: url("~@/assets/img/bg.png"); } ``` 路径别名可以帮助我们简化模块的引用路径，省去无数的 `../../`。但编辑器往往无法识别，不仅无法在输入路径时弹出自动补全的建议菜单，也无法 Ctrl + 点击跳转到对应模块。这个问题是必须解决的。 *...