Nuxt.js项目搭建 拓展less, sass

1,555 阅读3分钟

Nuxt.js完整的请求步骤

Nuxt.js的结构目录 目录

资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。

布局目录
布局目录 layouts 用于组织应用的布局组件。
若无额外配置,该目录不能被重命名。

中间件目录
middleware 目录用于存放应用的中间件。

页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

静态文件目录
静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/robots.txt 映射至 /robots.txt

Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置。

nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。
package.json 文件
package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口

拓展点: 什么是less

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
    Less 可以运行在 Node 或浏览器端。

less的优点: 可以设置变量。在比较大的工程里面,想要找到某个特定的样式并修改参数无疑是非常困难的,而有了变量设置,可以把所有的样式的值都用变量表示,这样修改某个样式就只需要找到对应的变量就行了。 比如bootstrp源码包里就有个variables.less文件,专门用来放变量,当然,比较小的工程没必要费那个劲。

可以写混型(mixin)。有点像是预定义的类,有些写法很复杂、字很多的样式,可以先把他写成类,然后在后面直接引用就行了。
比如:

.color-gradient(@start-color, @end-color){
	background: linear-gradient(@start-color, @end-color);
	background: -moz-linear-gradient(@start-color, @end-color);
	background: -o-linear-gradient(@start-color, @end-color);
	background: -webkit-linear-gradient(@start-color, @end-color);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = @start-color, endColorstr = @end-color);
	//GradientType = 0----vertical; GradientType = 1----horizontal.
}

以后每次遇到渐变色,引用.color-gradient(@start-color, @end-color)就可以了。

可以用嵌套的方式写css。其实这一点才是最关键最好用的,本来写css的选择器很是头疼,有些标签要反复写,效率低且易出错,现在用less写,只需要按照html的DOM树方式写一遍,然后在里面加样式就行了。

什么是sass ****

Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性
Sass 生成良好格式化的 CSS 代码,易于组织和维护。
Sass 文件后缀为 .scss。

Sass 作用域
Sass 变量的作用域只能在当前的层级上有效果;
当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的: