Vue项目中配置pug解析支持
Vue 的用法没有变化:
<template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template>
要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析
vue-cli 2+ 配置:
下载包:
npm i -D pug pug-html-loader
在build/webpack.base.conf.js 的 module 中添加规则:
module: { rules: [ { test:/\.pug$/, loader: "pug-html-loader" }, // 省略其他规则 ] }
好了启动或重启项目,即可开心的尝试了
vue-cli 3 配置:
由于 cli 升级到3了,相关配置发生了很大的改变,所以要和2的更改不同:
下载包:
npm i -D pug pug-html-loader pug-plain-loader
和2比多了一个 pug-plain-loader
在 vue.config.js (如果没有就在根目录下新建一个) 添加代码:
module.exports = { chainWebpack: config => { config.module.rule('pug') .test(/\.pug$/) .use('pug-html-loader') .loader('pug-html-loader') .end() } }
重启项目即可正常使用; 严格来说, vue-cli3 更像一种插件的使用,但是对于一些新人来说,可能还不习惯这样的操作吧
总结
以上所述是小编给大家介绍的Vue项目中配置pug解析支持,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
详解Vue CLI3配置解析之css.extract
大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下: Extract text from a bundle, or bundles, into a separate file. 然后配置如下:(省去了 rules
-
mpvue中配置vuex并持久化到本地Storage图文教程解析
# 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store. 步骤: 1.在src目录下新建一个store目录,结构如下(官方推荐: vuex.vuejs.org/zh-cn/struc-) 2. 在main.js中引入你的store, 并绑定到Vue构造函数的原型上,这样在每个.vue的组件都可以通过this.$store访问store对象. 3. ok,可以使用了.我说一下vuex官方推荐的使用方案(可适应大型应用). 首先在mutation
-
Vue项目中配置pug解析支持
Vue 的用法没有变化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template> 要注意的一点是: 标签后面
-
在vue项目中配置你自己的启动命令和打包命令方式
目录 配置自己的启动命令和打包命令 准备 vue项目启动命令的配置与切换 vue启动命令的切换npm run dev和npm run serve配置 修改方法 配置自己的启动命令和打包命令 在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测 这时 如何用一套代码 加上 几个命令来轻松的做到这些? 准备 首先除vue项目外 我们还需要安装几个额外的包来帮助我们 这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境 npm i cross-e
-
在vue项目中使用sass的配置方法
1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /
-
vue项目中运用webpack动态配置打包多种环境域名的方法
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p
-
vue项目中的webpack-dev-sever配置方法
问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器 解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入
-
Nginx部署vue项目和配置代理的问题解析
1.nginx安装和启动 # 安装nginx sudo apt-get install nginx # 启动 sudo service nginx start 验证安装 # 安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功 nginx -v # 如果输出类似于这样的版本号等,证明安装完成 nginx version: nginx/1.14.0 (Ubuntu) 2.修改nginx配置文件,部署项目 查看nginx的配置,linux系统下的配置文件通常会存放在/etc目
-
vue项目中禁用浏览器缓存配置案例
项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法 1.public文件夹中修改 index.html文件meta配置 <meta http-equiv="pragram" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> &l
-
vue项目中进行svg组件封装及配置方法步骤
最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用vue cli4进行配置的) 2.创建一个自定义组件 具体代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=
-
vue项目中如何通过cdn引入资源并配置详解
目录 概念 作用 引用资源及配置 1.引入 2.配置 3.在main.js文件中去除原来的引用 总结 概念 cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统,当用户向cdn链接请求资源时,cdn会利用最靠近用户的服务器来给用户返回资源. 作用 使用cdn能实现用户不需要在项目中通过npm下载其他资源(如第三方库),直接通过请求cdn服务器,服务器返回后即可使用,这样就减小了打包时包的大小,项目的首屏加载也能过更快. 引用资源及配置 话不多说,下面对vue项目中常用的资源进行cdn引用
随机推荐
- C# 校验帮助类正则表达式
- vue使用watch 观察路由变化,重新获取内容
- Swift开发之UITableView状态切换效果
- javascript 动态修改css样式方法汇总(四种方法)
- C# 根据ip获取城市等相关信息
- Nginx下配置pathinfo及ThinkPHP的URL Rewrite模式支持
- python网络编程调用recv函数完整接收数据的三种方法
- mysql delete 多表连接删除功能
- Android 九宫格的实现方法
- Sql Server 2000 行转列的实现(横排)
- asp实现生成由数字,大写字母,小写字母指定位数的随机数
- 微信小程序教程系列之视图层的条件渲染(10)
- PHP递归创建多级目录
- jQuery 跨域访问解决原理案例详解
- jQuery循环动画与获取组件尺寸的方法
- window.open被浏览器拦截后的自定义提示效果代码
- Jquery操作cookie记住用户名
- 非常实用的12个jquery代码片段
- jQuery 获取遍历获取table中每一个tr中的第一个td的方法
- js判断一点是否在一个三角形内