vue可以配合jade以及sass吗_Vue.js+Webpack+Sass+Jade(pug)网站构建

1. 前情提要

简介摘抄

(1) Vue.js

Vue.js(读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

(2) Webpack

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

(3) Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。

(4) Jade(pug)

Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。

注：Jade已更名为pug，但jade之前的版本依旧可以使用

2. Pre-work

通过命令行note -v 可以查看node.js的版本号。

Vue.js需要Node版本在4.0.0以上，详见之前的博文 Vue.js入门 - 安装

3. 搭建

全局安装 vue-cli

创建一个基于 webpack 模板的新项目

安装依赖

运行

4. 扩展Sass和Jade(Pug)

由于习惯于用jade，在实际构建中，我并未安装pug。读者可根据实际情况，选择pug或者jade安装。

(1) 安装依赖

【Pug】

npm install pug pug-loader pug-filters -D

【Jade】

npm install jade jade-loader -D

【Sass】

npm install sass sass-loader node-sass -D

(2) 修改config

在工程目录下找到build文件夹，打开webpack.base.conf.js文件。

加入以下配置：

{ test:/\.sass$/, loader: 'style!css!sass?sourceMap'},

{ test:/\.jade$/, loader: "jade"},

{ test:/\.pug$/, loader: 'pug'},

(3) 测试

工程目录下src -> components -> Hello.vue 修改为

div.hello h1 hello p{{msg}}

5. 番外

按照上文es6还是要报错，需根据下文定义type="es6"

依旧未解决sass显示问题，scss没问题