*{margin:0;padding:0}body{background-image:url("/static/images/background.png");#app{font-family:'Avenir',Helvetica,Arial,sans-serif;-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；文本-??对齐：居中；颜色：#2c3e50；顶部边距：60px；img.vue{宽度：80px;高度：自动；}}}}Tags:vue,webpack,jade,scss声明：转载须经本人同意本博客将讲述如何使用webpack搭建vue2.0环境，并展开如何在搭建环境中使用scss和pug(jade)，废话不多说，直接进入正题。Step1准备工作1.1首先确保自己的环境中安装了node.js。我们可以通过命令行node-v查看版本号，说明已经安装成功。我这里的node版本是7.0.0，建议大家不要用旧版本。如果显示node:commandnotfound，则需要安装node。直接到node官网下载安装即可。1.2安装好node之后，我们就可以使用npm包管理工具了。由于npm下载模块很慢，这里建议大家先安装淘宝的npm镜像cnpmnpminstall-gcnpm安装成功后，我们就可以使用cnpm安装依赖了，速度很快。第二步开始搭建2.1为了方便，我们直接选择vue官方的脚手架工具vue-cli进行安装。该工具提供开箱即用的构建工具配置，并带来现代前端开发流程。只需一分钟即可通过热重载、静态检查保存和生产就绪构建配置启动项目：#全局安装vue-cli$npminstall--globalvue-cli#创建一个新的基于webpack的模板项目$vueinitwebpackmy-project（你要创建的文件名，可以任意）vueinitwebpackmy-project会有一些配置供开发者选择，我简单说明一下：2.2然后输入下面的命令，你的environment即使初始构建成功#进入目录$cdmy-project#安装依赖，npm可以换成cnpm加速$npminstall#运行环境$npmrundev此时我们可以看到命令行工具已经开通了8080端口，浏览器本地服务器在浏览器输入地址后可以打开vue页面。至此，我们就完成了vue+webpack环境的搭建。第三步补充scss和pug依赖（扩展）。现在，我们搭建的环境不支持scss和pug语法，需要重新“加工”一下配置。使用scss，pug同学相信webpack已经玩的很好了，这里就不细说了，直接去命令行#安装支持pug依赖npminstallpugpug-loaderpug-filters-D#安装支持jade依赖npminstalljadejade-loader-D#安装支持scss依赖npminstallsasssass-loadernode-sass-D安装完成后，进入/build目录，打开webpack.base.conf.js文件，并找到如下图所示的位置：把红框里的内容添加到文件中：{test:/\.scss$/,loader:'style!css!sass?sourceMap'},{test:/\.jade$/,loader:"jade"},{test:/\.pug$/,loader:'pug'}这样我们的.vue文件就可以支持pug和scss语法例子：//使用pug语法#appimg.vue(src="./assets/logo.png")你好//使用scss语法*{margin:0;padding:0}body{background-image:url("/static/images/background.png");#app{font-family:'Avenir',Helvetica,Arial,sans-serif;-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；文本-??对齐：居中；颜色：#2c3e50；顶部边距：60px；img.vue{宽度：80px;高度：自动；}}}}构建源代码加小项目
