怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。plugins: [new HtmlWebpackPlugin({title: 'Custom template',template:
如果默认生成的 HTML 文件不适合需求，可以创建/使用自定义模板。
一是通过 inject 选项，然后传递给定制的 HTML 文件。html-webpack-plugin 将会自动注入所有需要的 CSS, js, manifest 和 favicon 文件到标记中。
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
template: 'myIndex.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
})
]
自定义的myIndex.html
参考：http://www.cnblogs.com/haogj/p/5160821.html
另一个是配置html-webpack-plugin
使之直接为项目生成一个或多个HTML文件(HTML文件个数由插件实例的个数决定)，
并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。
以下例子将通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。
1.在项目根目录下安装插件
cnpm install html-webpack-plugin --save-dev
2.在webpack配置文件头部require html-webpack-plugin模块，并保存引用至htmlWebpackPlugin[变量]。
const HtmlWebpackPlugin = require('html-webpack-plugin')
3.为webpack配置文件暴露的对象添加一个plugins属性，属性值为一个数组，将新建的html-webpack-plugin对象实例添加到数组中。若不传入任何参数，那么插件将生成默认的html文件。
module.exports = {
entry: {
main:'./src/script/main.js'
},
output: {
path: './dist',
filename: 'js/[name].bundle.js'
},
plugins:[
new htmlWebpackPlugin()
]
}
4.配置参数。为新建的对象实例传入一个对象字面量参数，初始化对象实例的属性
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: resolve('favicon.ico'),
title: 'vue-element-admin',
path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}),
]
5.在HTML中使用
参考：
https://www.jianshu.com/p/89414e89c563
vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
读取web工程中.properties资源文件的模板代码
读取web工程中.properties资源文件的模板代码 // 读取web工程中.properties资源文件的模板代码 private void test2() throws IOException ...
vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...
CI框架中自定义view文件夹位置
要想自定义view文件夹的位置,首先要了解CI框架时如何加载view文件夹的. CI中默认调用view的方法是: $this->load->view(); //这一行代码的原理是什么呢?请 ...
vue中创建js文件使用export抛出函数，import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
vue中引入字体文件
在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...
随机推荐
iOS内置音频
Predefined soundsThere are some predefined system sounds, for the system sound ID in the range 1000 ...
linux上安装mysql
linux下mysql 最新版安装图解教程 1.查看当前安装的linux版本 命令:lsb_release -a 如下图所示 通过上图中的数据可以看出安装的版本为RedHat5.4,所以我们需要下载R ...
HDU1058Humble Numbers
Humble Numbers Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
Linux安装QQ 2017
网上有很多wineQQ,是基于2012或者2013做的,然而当安装好后登录他会提示版本过来,我在优麒麟的应用商店里找到了一个基于国际版QQ的Wine版本,这里说下安装过程. 先上两张成果图: 下载地址 ...
python之路-pip安装
pip类似RedHat里面的yum,安装Python包非常方便 安装pip方法: 1.安装环境:ubuntu-14.04.2 sudo apt-get install python-pip pyt ...
关于ionic开发的一些总结(项目启动设置，app图标名称更改)
1.更改包名称 一般项目刚生成时,ionic会根据项目名称自动给你生成一个包名.要修改包名的话,在根目录的config配置文件中,
不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
Libre 6006 「网络流 24 题」试题库 / Luogu 2763 试题库问题 (网络流，最大流)
Libre 6006 「网络流 24 题」试题库 / Luogu 2763 试题库问题 (网络流,最大流) Description 问题描述: 假设一个试题库中有n道试题.每道试题都标明了所属类别.同 ...
(转)mysql explain详解
原文:http://www.cnblogs.com/xuanzhi201111/p/4175635.html http://yutonger.com/18.html http://www.jiansh ...
H264码流中SPS PPS详解<;转>;
转载地址:https://zhuanlan.zhihu.com/p/27896239 1 SPS和PPS从何处而来? 2 SPS和PPS中的每个参数起什么作用? 3 如何解析SDP中包含的H.264的 ...
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)