[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;
  
  

用户代码片段

• 使用VScode开发Vue项目的时候，我们可以自定义一些代码片段作为模板
• 创建方法
  • 点击VScode左下角的齿轮按钮，选择用户代码片段
    
  • 点击“新建全局代码片段”
    
  • 输入代码段文件名，文件名没有要求，它就是保存你这个代码片段文件的文件名
    
  • 然后就能看到一些注释和样例
    
  • 框出来的部分就是一个代码片段，一个代码片段文件中可以有多个代码片段，所以如果你有很多模板要自定义，不需要创建多个代码片段文件
  • 前面的“Print to console”是代码片段的key，触发代码片段时可以看到
  • 代码片段里面有四个属性
    • scope：表示作用域，在哪里可以使用这个代码片段，不写这个属性表示全局可用
    • prefix：前缀，是用于触发这个代码片段的关键字
    • body：是代码片段的模板内容，触发代码片段之后，我们需要的就是这里面的内容
    • description：这段代码片段的描述
  • 定义我们自己的代码片段

    "Doc for Vue": {
    	"scope": "javascript,typescript",
    	"prefix": "v1",
    	"body": [
    		"new Vue({",
    		"	el: '#app',",
    		"	data: {",
    		"		message: 'hello world',",
    		"	},",
    		"});"
    	],
    	"description": "my snippets for Vue"
    }
    

• 效果
  • 输入'v1'，我们可以看到VScode已经提示我们这个代码片段了
    
  • 回车，就可以看到我们刚才定义的代码片段
    

TODO