[Vue]Vue开发过程中的一些方便的操作

Vue开发过程中的一些方便的操作

vue devtools

• devtools是安装在浏览器上的一个插件，开发过程中可以直接在浏览器控制台审查和调试vue应用
• 安装方法，演示在chrome浏览器上的操作，edge操作是一样
  • 打开vue-devtools项目地址
  • 使用git clone命令将项目拉取到本地
    

    

  • 注意：clone下来的项目是在main分支上的，我们要安装在浏览器上需要切换到add-remote-devtools分支
    

    

  • 所以我们需要执行如下指令(注意：执行这个命令的时候要在devtools目录下) git checkout -b add-remote-devtools origin/add-remote-devtools
    

    

  • 上面那行git命令的意思是在本地创建一个分支add-remote-devtools并且换到这个分支，而这个分支是和远程仓库的分支add-remote-devtools相关联的
  • 检查一下，成功
    

    

  • 接下来执行安装指令cnpm i
  • 然后执行打包指令npm run build
  • 打包完成之后我们打开chrome浏览器，打开扩展程序，选择‘加载已解压的扩展程序’
    

    

  • 在弹出的窗口中打开安装的devtools目录，进入shells文件下，选择chrome文件夹
    

    

  • 安装成功
    

    

• 效果展示
  • 创建一个html页面，里面插入vue组件
  • 用浏览器打开，打开控制台，选择vue标签，就能对vue组件进行审查和调试了
    

    

  • 在控制台里直接修改data里的message信息，可以看到浏览器上显示内容也会同步改变
    

    

去除不必要的提示

• 我们打开浏览器控制台调试的时候，发现上面有几行提示
  

  

• 这个提示是提示我们目前使用的vue是开发版本而非生产版本，对我们开发没有影响，但是每次看都觉得碍眼
• 只要插入这行代码，提示就消失了
  Vue.config.productionTip = false;
  

  

  
  

  

Todo