Vue 进阶(幺陆叁):vue 项目启动后自动打开页面并设置默认浏览器
以windows
系统为例,操作方法如下:
一、修改默认浏览器
设置谷歌浏览器为默认浏览器。
1、首先打开“开始菜单
”,点击“控制面板
”;
2、在“控制面板”里面找到“默认程序
”,进入后点击“设置默认程序
”;
3、加载好后选择 “谷歌浏览器
”;
4、选择“将此程序设置为默认值
”,如果安装 360 安全卫士,必须先退出 360 安全卫士,否则设置不起效果。
5、选择“选择此程序的默认值
”,全选所有的扩展名,保存。
二、vue 项目启动自动打开页面
若需要Vue
项目启动后自动打开浏览器展示页面,还需要打开config
文件下的index.js
文件,更改autoOpenBrowser
为true
即可实现。
vue
脚手架搭建项目后启动npm run dev
,会出现
同时,Chrome
浏览器自动打开。
三、拓展阅读
在前期博文《Vue进阶(幺陆肆):vue自定义拖动指令》讲解了Vue
如何自定义拖拽指令,以上方法只是简单实现了元素的基本拖拽,在视图可视化编辑功能中,不仅需要对页面元素进行拖拽,而且还需要实现页面元素可编辑。
在开源项目(esview)基础上已经实现了页面元素属性可编辑,开源项目(vue-drag-resize)基础上实现了页面元素可拖拽功能,现需要对以上 2 个开源项目进行整合以实现元素可拖拽可编辑。这里涉及到自定义指令的封装。
四、延伸阅读
this
指向组件实例,$el
用于获取Vue
实例挂载的DOM
元素,在mounted
生命周期中才有效,之前的钩子函数内无效。如下代码所示,Vue
脚手架中,$el
指向当前组件template
模板中的根标签。
控制台输出:
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/bc3ab6754b4958c5135b36bfc】。文章转载请联系作者。
评论