前提先安装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
原文地址:https://blog.csdn.net/qq_19891197/article/details/134743741
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_26830.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。