效果：
代码参考：
HTML:
<div class="panel-title"><span>个性标签</span></div>
CSS:
.panel-title span {
display: inline-block;
width: 70px;
font-weight: 500;
text-align: justify;
text-align-last: justify;
}
.panel-title:after {
content: "\FF1A";
}首先排除了没有less 和less-loader的可能
这个问题定位应该是webpack关于less-loader的配置默认值是不合适的
需要添加新的配置进去
但是Vue-CLI3没有将2.x时的webpack.base.conf.js文件暴露在项目目录中
而是通过创建vue.config.js并添加自定义配置项在里面 最终在run serve或run build的时候 检测该js文件并将配置项通过merge合并进去 的方式实现配置项的修改
在Vue-cli2.x的时候 给loader加配置项是方式是这样的
{ loader: 'less-loader', options: { javascriptEnabled: true } }在Vue-Cli3.0中需要这样写vue.config.js
module.exports = {
css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项
less: {
javascriptEnabled: true
}
}
}
}这个时候重启项目
npm run serve在升级脚手架到vue-cli3.0版本的时候出现了这个报错：
我在这里大概说一下出现这个报错的原因在哪里和解决办法
原因
vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。
这是vue升级到2.0之后就有的特点。
而我的app.vue文件中，初始化vue却是这么写的，这种形式为compiler模式的，所以就会出现上面的错误信息
// compiler
new Vue({
el: '#app',
router: router,
store: store,
template: '<App/>',
components: { App }
})解决办法
将app.vue中的代码修改如下就可以
//runtime
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app")到这里我们的问题还没完，那为什么之前是没问题的，之前vue版本也是2.x的呀？
原作者文章中还有两种解决办法，请阅读原文章查看：
作者：LeonWuV
来源：CSDN
原文：https://blog.csdn.net/wxl1555/article/details/83187647
版权声明：本文为博主原创文章，转载请附上博文链接！
设计师工具
px cook 设计图标注软件
蓝湖 设计师协作平台
cuttermant 切图工具
操作非常简单的屏幕取色工具+屏幕尺子+屏幕截图工具。
取色
可以直接复制 HTML 颜色值，也可以复制如 color: #ffffff 的 CSS 代码。
尺子
可以直接复制带 PX的大小，也可以复制如 width: 100px 的 CSS 代码。
截图
除了传统的复制到剪贴板，还可以复制为地址：在网页中如果需要上传图片截图，只需复制为地址，然后把本地文件地址复制进行即可上传。
标注
对于视觉稿，可以标注某些模块的功能。还可以创建多个截图区域。
支持多个快捷键
很多取色软件都不支持方向导航，导致鼠标定位到某个点非常累。Screentoolkit支持完美的快捷键。
使用方向键微调！定位点再也不怕抖。
使用F5刷新页面！再也不怕截不到一闪一闪的图标了。
使用 CTRL+C 复制！ 使用 CTRL+S 保存！
启动快捷键？Screentoolkit虽然支持这个功能，但必须开机启动这个软件，在软件里面可以设置。
如果不设置开机启动，自然不能做到像qq这样方便的全局快捷键。不过还有一个方案：添加 快捷方式到快速启动或Win7任务条。 点一下就启动了。
软件使用纯C++完成，速度快。
支持多个屏幕
目前很多前端开发人员都有多个显示器，本截图工具是少数的支持多个屏幕的取色器。
本软件只有一个单独的 exe 文件，绿色高效，操作简单。仅适用于 Windows 操作系统。
awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息
awk处理过程: 依次对每一行进行处理，然后输出
awk命令形式:
awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file
[-F|-f|-v] 大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=value
' ' 引用代码块
BEGIN 初始化代码块，在对每一行进行处理之前，初始化代码，主要是引用全局变量，设置FS分隔符
// 匹配代码块，可以是字符串或正则表达式
{} 命令代码块，包含一条或多条命令
； 多条命令使用分号分隔
END 结尾代码块，在对每一行进行处理之后再执行的代码块，主要是进行最终计算或输出结尾摘要信息
特殊要点:
$0 表示整个当前行
$1 每行第一个字段
NF 字段数量变量
NR 每行的记录号，多文件记录递增
FNR 与NR类似，不过多文件记录不递增，每个文件都从1开始
\t 制表符
\n 换行符
FS BEGIN时定义分隔符
RS 输入的记录分隔符， 默认为换行符(即文本是按一行一行输入)
~ 匹配，与==相比不是精确比较
!~ 不匹配，不精确比较
== 等于，必须全部相等，精确比较
!= 不等于，精确比较
&& 逻辑与
|| 逻辑或
+ 匹配时表示1个或1个以上
/[0-9][0-9]+/ 两个或两个以上数字
/[0-9][0-9]*/ 一个或一个以上数字
FILENAME 文件名
OFS 输出字段分隔符， 默认也是空格，可以改为制表符等
ORS 输出的记录分隔符，默认为换行符,即处理结果也是一行一行输出到屏幕
-F'[:#/]' 定义三个分隔符
print & $0
print 是awk打印指定内容的主要命令
awk '{print}' /etc/passwd == awk '{print $0}' /etc/passwd
awk '{print " "}' /etc/passwd //不输出passwd的内容，而是输出相同个数的空行，进一步解释了awk是一行一行处理文本
awk '{print "a"}' /etc/passwd //输出相同个数的a行，一行只有一个a字母
awk -F":" '{print $1}' /etc/passwd
awk -F: '{print $1; print $2}' /etc/passwd //将每一行的前二个字段，分行输出，进一步理解一行一行处理文本
awk -F: '{print $1,$3,$6}' OFS="\t" /etc/passwd //输出字段1,3,6，以制表符作为分隔符