vue环境准备

悟空和大王
190 阅读2分钟

notepad++ 绿色版

Notepad++(功能强大的代码编辑器) v8.6.8 中文绿色版-绿软小站 (gndown.com)

chrome插件下载

收藏猫插件-Chrome插件商店,谷歌浏览器插件,谷歌应用商店插件推荐及下载 (pictureknow.com)

SingleFile-Chrome插件下载-收藏猫插件 (pictureknow.com): 将网页下载为一个单独的html页面

ModResponse: chrome请求拦截插件

node卸载与安装与多版本切换

卸载

  1. 清除npm资源
npm cache clean --force

查看全局安装的npm包

npm list --depth 0 -g

image.png

卸载全局安装npm命令

npm uninstall -g <package>  (可以不写版本)

image.png

npm 查看全局安装和卸载全局安装_npm 全局卸载-CSDN博客

  1. 先通过windows卸载程序卸载

image.png

  1. 删除环境变量

image.png

  1. 通过where node命令查找node目录，再手动删除该目录

image.png

Windows系统完全卸载删除 Node.js_卸载nodejs命令-CSDN博客

  1. 查找这些文件并删除

C:\Program Files (x86)\Nodejs

C:\Program Files\Nodejs

C:\Users\{User}\AppData\Roaming\npm （或%appdata%\npm）

C:\Users\{User}\AppData\Roaming\npm-cache（或%appdata%\npm-cache）

C:\Users\{User}\AppData\Local\Temp\npm-*

  1. 重启电脑

安装

  • 优先选择压缩包方式安装，而非exe方式安装，压缩包方式安装仅需解压到某个目录，再设置到path环境变量中即可

版本切换

离线环境，则先采用压缩包方式安装n个不同版本的node，再通过修改环境变量的方式，进行node版本切换

vscode卸载与安装

卸载vscode

完全卸载VSCode的方法_如何卸载vscode-CSDN博客

通用插件

  • ms-ceintl.vscode-language-pack-zh-hans: 中文插件
  • eamodio.gitlens: git lens
  • mhutchie.git-graph: Git Graph
  • donjayamanne.githistory: Git History
  • pkief.material-icon-theme: Material Icon Theme
  • pranaygp.vscode-css-peek: css跳转插件
  • ecmel.vscode-html-css: html css support
  • bradlc.vscode-tailwindcss: tailwind插件
  • pucelle.vscode-css-navigation: CSS Navigation
  • syler.sass-indented: sass插件
  • glenn2223.live-sass: sass编译插件
  • esbenp.prettier-vscode: prettier
  • dbaeumer.vscode-eslint: eslint
  • maggie.eslint-rules-zh-plugin: eslint中文
  • formulahendry.code-runner: 直接运行js
  • easymock.easymock: 用于创建独立的mock服务
  • lihuiwang.vue-alias-skip: 别名路径跳转
  • shenjiaolong.vue-helper: vue-helper
  • joeandaverde.vscode-elm-jump: 常规代码跳转

jsconfig.json

{  
  "compilerOptions": {  
    "target": "ES6",  
    "module": "commonjs",  
    "paths": {
      "@/*": ["./src/*"]
    } 
  },  
  "include": [  
    "src/**/*"  
  ],  
  "exclude": [  
    "node_modules"  
  ]  
}

查找全局变量: 选中变量，再ctrl + t

vue开发插件

  • vue.volar: 官方插件
  • octref.vetur: vue2插件
  • nicholashsiang.vscode-vue2-snippets: vue2代码快速插入插件
  • dariofuzinato.vue-peek: vue-peek

常用插件使用

file-saver

vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本_vue file-saver-CSDN博客

npmmirror 镜像站：file-saver

vxe-table

适用vue2版本: vxe-table v3 (vxetable.cn)

适用vue3版本: vxe-table v4 (vxetable.cn)

avatar
文章
阅读
粉丝