当前位置：首页 > news >正文

安装vscode插件与安装vue项目

news 来源：原创 2024/5/9 14:38:57

前提先安装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 <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;

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

在项目的根目录下新建文件.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