vue+webpack+scss+jade(pug)的环境搭建

GraphQuery 发布于2019-08-01 15:59 / 3070人阅读

摘要：标签声明转载须经本人同意这篇博客就聊一聊如何用搭建的环境，以及拓展了下如何在搭建好的环境中使用以及，废话不多说，直接进入主题。第三步补充，依赖扩展现在，我们搭建的环境并不支持，语法，我们需要再加工一下配置。

标签：vue,webpack,jade,scss
声明：转载须经本人同意
这篇博客就聊一聊如何用webpack搭建vue2.0的环境，以及拓展了下如何在搭建好的环境中使用scss以及pug（jade），废话不多说，直接进入主题。

第一步准备工作

1.1首先要保证自己的环境中安装了node.js，我们可以通过命令行node -v查看

如果出现版本号，说明已经安装成功了。我这里的node版本是7.0.0，建议大家不要使用过老的版本。如果显示node: command not found则需要安装node，大家直接在node的官网下载安装就好了
1.2安装了node以后我们就可以使用npm包管理工具了，由于npm下载模块速度很慢，所以这里建议大家先安装淘宝的npm镜像cnpm

npm install -g cnpm

安装成功后我们就可以使用cnpm安装依赖了，速度很快。

第二步开始搭建

2.1为了方便起见，我们直接选择vue的官方脚手架工具vue-cli安装，该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$  vue init webpack my-project(你要建立的文件名称，可任意)

vue init webpack my-project的时候会有一些配置供开发者选择，我简单解释一下：

2.2接着输入如下命令，你的环境就算初步搭建成功了

# 进入目录
$ cd my-project
# 安装依赖，npm可替换为cnpm加快速度
$ npm install
# 运行环境
$ npm run dev

这时我们可以看到一个命令行工具打开了一个端口为8080的本地服务器，在浏览器输入该地址后就可以打开vue的页面，到了这一步，我们就算把vue+webpack的环境搭建完毕了。

第三步补充scss，pug依赖（扩展）

现在，我们搭建的环境并不支持scss，pug语法，我们需要再“加工”一下配置。用到scss，pug的同学相信webpack已经玩的很溜了，我这里就不详细讲了，直接上命令行

#安装支持pug依赖
npm install pug pug-loader pug-filters -D
#安装支持jade依赖
npm install jade jade-loader -D
#安装支持scss依赖
npm install sass sass-loader node-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语法

//使用scss语法

搭建源码外加小项目

服务器托管混合云 webpack搭建 lamp环境的搭建 php环境的搭建 php的环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50242.html

webpack 简易配置入门教程

摘要：使用等预处理器编写可以将你项目中的所有文件，处理成浏览器能识别的文件。测试打包基本的配置就完成了。修改处理文件执行顺序是从右到左修改一下入口文件中的样式引入打包测试完美通过。这时可以使用提供的配置来使引入文件的时候变得更加方便简单。 showImg(https://segmentfault.com/img/remote/1460000010844617); 本文正文链接最近公司弄了个...

JackJiang 2019-08-20 18:56 评论0 收藏0
webpack在前端项目中使用心得一二

摘要：熟悉了之后，各种新旧项目，大小项目都能用耍的飞起。使用作为文件中的模板安装，记住不是，也不用配置，只需在标签中指定，就可以愉快的使用语法了，比起看起来简洁多了。 webpack做文件合并使用构建工具非常常用一个功能就是合并js和css文件，gulp和grunt都是编写相应的任务来完成，转到webpack突然懵逼了，简单的项目怎么做文件合并呢？其实只需把多个js文件同时引入到main....

qieangel2013 2019-08-20 16:11 评论0 收藏0
vue-cli安装和vs code 的相关配置

摘要：在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。的安装一安装的官网下载的安装包。在或中执行命令。以上，就是和的安装与配置在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。 node: node是js服务执行的环境，通常我们使用node实现前端的工程化。前端工程化有很多工具可以实现，比如webpack、glup等，他们都是基础node进行开发的。 w...

Loong_T 2019-08-23 14:46 评论0 收藏0
Node中间层实践（二）——搭建项目框架

摘要：项目地址脚手架使用过，的同学都清楚，官方推荐的安装方式是通过专用的来快速搭建一个由编译打包的项目框架。用在层的模块化，在中间层实现了模块化。这样，从中间层到前端都实现了热加载。版权声明：更多文章请访问我的个人站Keyon Y，转载请注明出处。项目地址：https://github.com/KeyonY/NodeMiddle 脚手架？使用过angular2，vue2的同学都清楚，官...

DrizzleX 2019-08-22 13:59 评论0 收藏0
webpack -> vue Component 从入门到放弃（四）

摘要：先展示一下文件目录结构先把相关的依赖给装好注意一下注释只是为了解释，在中不能写注释插件加载器预编译语法跨平台环境用来设置命令行安装预编译语法的配置中的对象，用于处理目录的对象，提高开发效率。 Foreword 之前三篇大致介绍了webpack的用法，正如这个系列标题而言从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合...

z2xy 2019-08-20 15:07 评论0 收藏0