html ｓｅｌｅｃｔ在html span实际的实操和应用
html span样式官方已经写好一个html span样式-html ｓｅｌｅｃｔ模板html span样式_cli，原本自己写一个，发现官方写得已经够好了，自己写显得有点多余，但为了让大家熟悉html ｓｅｌｅｃｔ，决定还是一步一步从0开始写，但源文件就直接拷贝官方的。
准备工作
新建文件夹D:\www2019\ｓｅｌｅｃｔ\html span样式2019，下面根目录指的就是这个目录
生成package.html objecton，根目录>npminit
安装html ｓｅｌｅｃｔ和html ｓｅｌｅｃｔ开发服务器，根目录>cnpmi-Dhtml selecthtml ｓｅｌｅｃｔ-dev-server
安装html span样式、html span样式x、html span样式-router，根目录>cnpmi-Shtml span样式html span样式xhtml span样式-router
下载html span样式_cli的html ｓｅｌｅｃｔ模板中sel这个源文件夹到根目录\sel中
安装html span样式
D:\www2019\ｓｅｌｅｃｔ\html select2019>cnpmihtml span样式-S
如果有下面的报错
[html span样式warn]:Youareusingtheruntime-onlybuildofhtml span样式wherethetemplatecompilerisnotavailable.Eitherpre-compilethetemplatesintorenderfunctions,orusethecompiler-includedbuild.
(foundin<Root>)
解释:运行时构建不包含模板编译器，因此不支持template选项，只能用render选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为render函数
修改D:/www2019/ｓｅｌｅｃｔ/html select2019/build/html selectfile.html object
resolve:{
alias:{
'html span样式':'html span样式/dist/html span样式.html object'
}
},
最简单的例子
D:\www2019\ｓｅｌｅｃｔ\html select2019\today\wang\home.html object
importhtml span样式from'html span样式';
constapp=newhtml span样式({
template:'<p>hellowolr</p>'
}).$mount('#main')
//D:\www2019\ｓｅｌｅｃｔ\html select2019\today\wang\home.html object
importAppfrom"./app.html span样式"
importhtml span样式from'html span样式';
constapp=newhtml span样式({
template:'',
components:{App}
}).$mount('#main')
//D:\www2019\ｓｅｌｅｃｔ\html select2019\today\wang\App.html span样式
<template>
<p>上午好</p>
</template>
报错
UncaughtError:Moduleparsefailed:Unexpectedtoken(1:0)
Youmayneedanappropriateloadertohandlethisfiletype.
安装并配置html span样式-loader
官方文档https://html span样式-loader.html span样式html object.org/...
D:\www2019\ｓｅｌｅｃｔ\html select2019>cnpmihtml span样式-loader-D
提示要安装html socket-loader和html span样式-template-compiler，现在将这两个也一起安装
D:\www2019\ｓｅｌｅｃｔ\html select2019>cnpmihtml socket-loaderhtml span样式-template-compiler-D
现在就可以正常显示html span样式组件
处理html socket文件
color:inherit;line-height:22px;font-family:"SourceCodePro",Consolas,Menlo,Monaco,"CourierNew",monospace;font-size:1em;display:block;white-space:inherit;-ms-overflow-x:auto;-ms-word-wrap:normal;box-sizing:border-box">//D:\www2019\ｓｅｌｅｃｔ\html select2019\today\wang\color:rgb(html 公式编辑器111119)">app.html socket
body{
color:#09f;
}
处理单独的html socket文件
没有装html socket-loader会报错
ERRORin./today/wang/app.html socket
Moduleparsefailed:Unexpectedtoken(1:0)
Youmayneedanappropriateloadertohandlethisfiletype.
安装和配置
官方文档:https://html ｓｅｌｅｃｔ.html object.org/loader...
D:\www2019\ｓｅｌｅｃｔ\html select2019>cnpmi-Dhtml socket-loader
{
test:/\.html socket$/,
loader:'html socket-loader',
},
对上面导入的html socket一般有两种处理，一是使用style-loader将html socket嵌入到html文件的style标签中，一种是单独存在一个文件中
style-loader
官方文档:https://html ｓｅｌｅｃｔ.html object.org/loader...
D:\www2019\ｓｅｌｅｃｔ\html select2019>cnpmistyle-loader-D
{
test:/\.html socket$/,
loader:'style-loader!html socket-loader',
},
多个loader是从右到左执行，多个loader之间用!连接，上面多个loader也可以写在数组的形式
{
test:/\.html socket$/,
use:[
{loader:"style-loader"},
{loader:"html socket-loader"}
]
}
这种写法是，从下到上执行，先执行html socket-loader再执行style-loader
将html socket文件单独打包到一个文件
这要使用到ExtractTexthtml selectPlugin插件
处理less/sass等文件
这要用到less-loader或sass-loader，同时得安装less或sass，如果没安装会报错
[html span样式warn]:ErrorinbeforeCreatehook:"Error:Cannotfindmodule"!!html span样式-loader/node_modules/html span样式-style-loader!html socket-loader!../../node_modules/_html span样式-loader@13.6.0@html span样式-loader/lib/style-compiler/index?{"html span样式":true,"id":"data-v-381730fa","scoped":false,"hasInlineConfig":false}!less-loader!../../node_modules/_html span样式-loader@13.6.0@html span样式-loader/lib/selector?type=styles&index=0&bustCache!./app.html span样式""
ave组件的内容
color:rgb(html 公式编辑器950)">color:inherit;line-height:22px;font-family:"SourceCodePro",Consolas,Menlo,Monaco,"CourierNew",monospace;font-size:1em;display:block;white-space:inherit;-ms-overflow-x:auto;-ms-word-wrap:normal;box-sizing:border-box"><>template>
<>pclass='morning'>上午好</>p>
</>template>
<stylelang='less'>
@>color:#f96;
.morning>template-variable">{
>color:@>color
}
</style>
安装less和less-loader
D:\www2019\ｓｅｌｅｃｔ\html select2019>cnpmi-Dlessless-loader
配置
{
test:/\.html socket$/,
use:ExtractTextPlugin.extract({
//fallback:"style-loader",//备用，如果提取不成功时，会使用style-loader来处理html socket
use:"html socket-loader"
})
/*use:[
{loader:"style-loader"},
{loader:"html socket-loader"}
]*/
},
{
test:/\.less$/,
use:[
{
loader:"style-loader"//createsstylenodesfromhtml objectstrings
},
{
loader:"html socket-loader"//translateshtml socketintoCommonhtml object
},
{
loader:"less-loader"//compilesLesstohtml socket
}
]
},
上面这个例子，只有导入的html socket文件单单独存在一个文件中，html span样式组件中的less归到了style中了，
说明：在html span样式组件<style>中，如果lang="less"，在html span样式-loader中默认配置好了less，无须另外配置
说明:上面例子是配置的是单独的less文件，不适合html rtmp中的less
说明：如何将html span样式中的less也放到单独的html socket文件中呢?参考https://html span样式-loader.html span样式html object.org/...
{
test:/\.html span样式$/,
loader:'html span样式-loader',
options:{
extracthtml socket:true
}
}
但上面有个缺点，会覆盖之前html socket中的配置中生成style.html socket文件，如何解决呢?
constpath=require('path');
consthtml ｓｅｌｅｃｔ=require('html ｓｅｌｅｃｔ')
constUglifyhtml objectPlugin=require('uglifyhtml object-html ｓｅｌｅｃｔ-plugin')
constHtmlhtml selectPlugin=require('html-html ｓｅｌｅｃｔ-plugin');
constExtractTextPlugin=require("extract-text-html ｓｅｌｅｃｔ-plugin");
constextracthtml socket=newExtractTextPlugin('html socket/[name]-one.html socket');
constextractLESS=newExtractTextPlugin('html socket/[name]-two.html socket');
module.exports={
plugins:[
extracthtml socket,
extractLESS
],
module:{
rules:[
{
test:/\.html socket$/,
use:extracthtml socket.extract({
//fallback:"style-loader",//备用，如果提取不成功时，会使用style-loader来处理html socket
use:"html socket-loader"
})
},
{
test:/\.html span样式$/,
loader:'html span样式-loader',
options:{
//extracthtml socket:true
extracthtml socket:function">function(){
returnextractLESS
}
}
}
]
},
}
导入html 菜单栏
color:rgb(html 公式编辑器950)">color:inherit;line-height:22px;font-family:"SourceCodePro",Consolas,Menlo,Monaco,"CourierNew",monospace;font-size:1em;display:block;white-space:inherit;-ms-overflow-x:auto;-ms-word-wrap:normal;box-sizing:border-box">//D:\www2019\ｓｅｌｅｃｔ\html select2019\today\wang\color:rgb(html 公式编辑器950)">color:rgb(html 公式编辑器111119)">App.html span样式中增加html 菜单栏
<>template>
<>pclass='morning'>
<>imgsel="../images/color:rgb(html 公式编辑器950)">color:rgb(73238html 公式编辑器)">logo.jpg"/>
<>imgsel="../images/a.jpg"/>
上午好
</>p>
</>template>
<stylelang='less'>
@>color:#f96;
.morning>template-variable">{
>color:@>color
}
</style>