Vue.js+Webpack+Sass+Jade(pug)网站构建

1. 前情提要

简介摘抄

(1) Vue.js

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

【官网】 https://vuejs.org/

(2) Webpack

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

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

【官网】https://webpack.js.org/
【中文网】https://doc.webpack-china.org/

(3) Sass

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

【官网】http://sass-lang.com/
【中文网】https://www.sass.hk

(4) Jade(pug)

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

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

【pug官网】https://pugjs.org
【jade中文教程】https://segmentfault.com/a/1190000000357534#articleHeader18

---

2. Pre-work

通过命令行note -v 可以查看node.js的版本号。
Vue.js需要Node版本在4.0.0以上，详见之前的博文 Vue.js入门 - 安装

---

3. 搭建

搭建过程请参照 Vue.js入门 - 安装中的步骤：

• 全局安装 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 修改为

<!------html------->
<!--加上【lang="jade"】属性-->
<template lang="jade">
    div.hello
        h1 hello
        p {{msg}}
</template>

<!------js------->
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!------css------->
<!--加上【lang='sass'】属性-->
<style lang='sass'>
h1
  color: red
</style>

5. 番外

Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

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

webstorm中es6语法报错，.vue文件中es6语法报错

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