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

安装vscode插件与安装vue项目

article 2024/11/20 4:53:29

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

创建vue3项目

npm create vue@latest

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

> cd <your-project-name>
> npm install
> npm run dev

项目安装eslint检测

npm install eslint

如果 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：是vue2代码的格式化代码工具（prettier只是方便格式化html），用于vue2为.vue单文件组件提供代码高亮以及语法支持，如果使用vue3禁用该插件，不然vue3项目语法报错
Auto Close Tag：自动闭合标签
Auto Rename Tag：是一个自动重命名tag的插件，就是修改其中一个tag，另一半也会跟着变
Vue VSCode Snippets：快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。只需要记住几个快捷键，模板vbase，vfor，就能少敲很多代码，妥妥的开发利器，提升效率的必备神器
One Dark Pro 主题
Live Server 启动服务，然后保存就即可更新

安装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