安装vscode插件与安装vue项目

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

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

2：安装vue–cli 脚手架

npm install -g vue@cli@5.0.4

查看 vue 版本

vue --version

卸载 脚手架

npm uninstall @vue/cli

npm uninstall vue

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

vue create &lt;project-name&gt;

vue init webpack &lt;project-name&gt;

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

3：安装vscode 插件

中文插件：Ch in ese (sim plifie d) （简体中文）
图标插件：vscode–icon s
区分代码块：Brac ket Pai r Co lo r ization Toggler
ESLint：代码规范和错误检查工具
ESLint Chinese Rules：ESLint中文提示
Ima ge Pre view ：图片预览
Indent-Rainb ow：容易查看代码缩进
Ja vaSc ript (ES6) code snip pe ts：支持ES6语法提示
Prettier – Code formatter：对代码进行快速格式化，html 类型的格式化
Vue 3 Snip pe ts：Vue语法高亮和格式化的 VS Code 插件，用来组件补全提示
VueHel per：vue代码提示插件
Vuter：用于为.vue单文件组件提供代码高亮以及语法支持
Auto Close Ta g：自动闭合标签
One Dark Pro 主题
Live Server 启动服务，然后保存就即可更新
Vuter是vue2代码的格式化代码工具（prettier只是方便格式化html）

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

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

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

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

public：静态资源目录，放一些静态文件，唯一的一个 html 文件存放在这个地方
API：存放封装的请求接口方法
assets：存放图片、css 层叠样式表等
components：存放非路由组件，一般把需要复用的组件放在此处
layout：存放公共部分的组件
mixins：存放混入的js 文件
request：存放二次封装的axios 请求库
router：存放路由文件，在路由文件中定义路由与组件之间的对应规则
store：状态管理
utils：工具函数存放的地方
views：存放路由组件
App.vue：根组件
main.js：项目的入口文件，项目运行首先会运行这个文件
.eslint rc.js：eslint 规则，可以在这增加修改删除 eslint 规则
packages.json：记录生产或开发环境用到的插件的版本信息
vue.config.js：可以在这配置 web pack的配置项

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

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

在配置文件 set ting.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