Nuxt.js项目目录说明及sass使用_综合

Nuxt.js项目目录

之前<<一篇文章搞懂服务器端渲染与客户端渲染以及利用脚手架工具 create-nuxt-app搭建Nuxt.js项目>>里我们学习了如何用脚手架工具 create-nuxt-app搭建Nuxt.js项目，如下图：
在这里插入图片描述
运行一下我们搭建好的nuxt项目之后，浏览器里打开端口localhost:3000，效果如下：这个myproject就是我们项目名。

打开安装好了的nuxt项目，其目录有如下这些：

assets文件夹下放一些未被编译的静态资源，如图片、css、sass、scss、js等。
components文件下放一些Vue.js组件.
layouts文件夹下放一些布局组件，它是一个布局目录。
middleware文件夹下放一些应用的中间件。
node_modules是存放我们依赖的文件夹。
pages是页面目录，存放路由及视图，Nuxt.js 框架读取该目录下所有的 .vue文件并自动生成对应的路由配置。若无额外配置，该目录不能被重命名。
plugins是插件目录，用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript插件。比如咱们如果在之前选择UI框架的环节如果咱们选择了Element，那么就会看到如下所示的plugins内容：
static文件夹是放一些静态文件的，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。
store目录就是咱们经常用vuex的仓库文件。Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store目录下创建一个 index.js 文件可激活这些配置。刚刚搭建完项目，下面是没有index.js文件的，需要手动配置。如下图：
nuxt.config.js就是咱们的nuxt配置文件了，以便覆盖默认配置。
package.json文件用于描述应用的依赖关系和对外暴露的脚本接口。

那assets文件夹与static文件夹有何区别?
共同点是都是存放静态资源的文件夹，
不同点是assets文件夹下是页面和组件中用到的静态资源，比如公共样式文件，字体图标文件，图片等。放在assets中的文件会进行压缩体积、代码格式化，压缩后会放置在static中一同上传服务器。因此建议样式文件放在assets中进行打包，引入的第三方文件放到static中，因为引入的文件已经做过打包处理。使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。
简单说就是，assets文件夹会经过webpack编译再打包而static文件夹不会经过编译就直接打包。所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。
如果把图片放在assets与static中，html页面可以使用；但在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以，具体代码如下：
在这里插入图片描述

sass安装使用

如果我们想使用sass可以直接在官网搜索sass就会出现css配置,如下图：
在这里插入图片描述
打开css配置这里，我们首先要安装sass,命令行代码输入

npm install --save-dev node-sass sass-loader

nuxt 会自动识别被导入文件的扩展名，然后 webpack 会使用相应的预处理器进行处理，所以要先安装相对应的预处理器。安装成功之后，我们就能在package.json里看到其对应版本号了，如下图：
在这里插入图片描述
安装好了之后，我们来测试一下。我们想配置一个全局公共的样式，那就要先在assets文件夹下新建一个css文件夹，然后我习惯取名为common.scss,然后写上一行代码

body{
    background-color:skyblue}

在这里插入图片描述
然后再在nuxt.config.js里配置：

最后运行看下结果，背景色变为了天蓝色，这样就在每个页面用上了公共的样式：

你能看到我在style上加上了lang="scss"和scoped,这个千万别忘了。"myproject"字体颜色从最初的黑色变为了红色。

如果每个页面想使用入口scss文件的变量时，需要每个页面都引入，很麻烦，那么我们可以这样做，配置一下全局的scss变量，这样在每个页面中使用入口scss文件的变量就不用专门引入了。我们先在assets下的css文件夹里新建一个variables.scss文件,然后写上

$color:#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ;

如下图所示
在这里插入图片描述
然后我们要使用 @nuxtjs/style-resources 来实现，就必须得先安装它。终端输入命令

npm i @nuxtjs/style-resources -D

安装成功之后我们就要在nuxt.config.js里进行配置，如下图，在modules里添加对应模块，然后手动添加上styleResources：
在这里插入图片描述
再打开index.vue,设置类名为subtitle的字体颜色，如下图，说明scss全局变量生效了。

以上如有不正确之处，欢迎评论指出。