安装vscode插件与安装vue项目

前提先安装nvm然后安装需要的nodejs

1：点击下载vscode，选择安装目录，一直点击安装就行

2：安装vue-cli脚手架

npm install -g vue@[email protected]

查看vue版本

vue --version

卸载脚手架

npm uninstall @vue/cli

npm uninstall vue

创建vue2项目，注意：项目名字不可以包含大写字母，可以用下划线分隔开

vue create <project-name>

vue init webpack <project-name>

如果 npm install -g vue-cli 执行很慢，可能是由于网络原因或者下载源的问题导致的。以下是一些处理方法： 修改 npm
源为淘宝镜像：可以使用如下命令将 npm 源切换到淘宝镜像，以提高下载速度。 npm config set registry https://registry.npm.taobao.org/

3：安装vscode插件

• 中文插件：Chinese (simplified) （简体中文）
• 图标插件：vscode-icons
• 区分代码块：Bracket Pair Colorization Toggler
• ESLint：代码规范和错误检查工具
• ESLint Chinese Rules：ESLint中文提示
• Image Preview ：图片预览
• Indent-Rainbow：容易查看代码缩进
• JavaScript (ES6) code snippets：支持ES6语法提示
• Prettier - Code formatter：对代码进行快速格式化，html类型的格式化
• Vue 3 Snippets：Vue语法高亮和格式化的 VS Code 插件，用来组件补全提示
• VueHelper：vue代码提示插件
• Vuter：用于为.vue单文件组件提供代码高亮以及语法支持
• Auto Close Tag：自动闭合标签
• One Dark Pro 主题
• Live Server 启动服务，然后保存就即可更新
• Vuter是vue2代码的格式化代码工具（prettier只是方便格式化html）

安装Vue VSCode Snippets后 通过按vb可在vue文件中快速创建基模板

在使用vue2项目时候，不要安装volar插件，这是vue3项目的语法检测，不然会报错

4：项目使用什么插件就安装什么插件，要在项目的目录下执行命令，就会只安装在相应的项目下了：

npm install axios;
npm install ladash;
npm install echarts;

在项目的根目录下新建文件.prettierrc ，里面内容为

{
     "printWidth": 120,
     "tabWidth": 2,
     "useTabs": false,
     "semi": false,
     "singleQuote": true,
     "trailingComma": "none",
     "arrowParens": "avoid",
    "bracketSpacing": true
}

在配置文件setting.json添加

 //  #让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // typescript
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,

vscode快捷键

常用快捷键
注释:
 单行注释: ctrl + k , ctrl + c 或 ctrl + /
 取消单行注释: ctrl + k , ctrl + u 
 多行注释: alt + shift + A
 多行注释: /**/
移动行: alt + up/down
显示/隐藏左侧目录栏 ctr + b
复制当前行: shift + alt + up/down
shift + ctrl + k删除当前行: 
控制台终端显示与隐藏: ctrl + ~ 
查找文件/安装 vscode 插件地址: ctrl + p
代码格式化: shift + alt + f
新建一个窗门: ctrl + shift + n
多行编辑: ctrl + alt + up/down