VScode

VScode

下载

VScode：https://code.visualstudio.com/

安装

汉化

Chinese (Simplified)

设置

背景色

Atom One Light Theme

Color Theme

护眼色

    "workbench.colorCustomizations": { // 设置背景颜色
        // "foreground": "#75a478",
        "editor.background": "#C7EDCC",
        // "editor.background": "#c1d8ac",
        "sideBar.background": "#FAF9DE",
        "terminal.background": "#EAEAEF"
    }

关闭自动更新

设置自动保存

注：

• 默认设置 off ，不自动保存；
• afterDelay —— 将在配置的 “#files.autoSaveDelay#” 后自动保存为保存的编辑器；
• onFocusChange —— 当编辑器失去焦点时，将自动保存为保存的编辑器（可理解为鼠标不在 VSCode 里时）；
• onWindowChange —— 当窗口失去焦点时，将自动保存为保存的编辑器（窗口可理解为每个代码脚本，当鼠标从 A 脚本转到 B 脚本时，自动保存脚本 A 的修改内容）；

语言切换

快捷键：Shift + Ctrl + p

关闭缩略图

关闭导航路径

关闭禅模式

Startup

Hot Exit(退出提示)

是否显示为预览

开启平滑插入动画

开启禅模式

NewLines

插件

jslint

vue

vetur

vscode-icons

HTML CSS Support

JavaScript (ES6)

IntelliSense for CSS

Bootstrap 4

Beautify(css)

Beautyfi(js)

Easy LESS

Debugger for Chrome

GitLens

Git History

Open in Browser

Live Server

扩展设置

Prettier-Code Formatter

format on save

Auto Save

Auto Rename Tag

Bracket Pair Colorizer 2

Browser Preview

Community Material Theme

Indent-Rainbow

Markdown All in One

LeetCode

前端开发

Emmet插件

创建html文件，输入!，就有提示。

快速生成代码

输入：
ul>li>a
ul>li>a.link
ul.header>li>a.link
ul.header>(li>a.link)*5
div.searche>div.logo+input
div.searche>div.logo{Logo}+input

包管理工具

nvm

https://github.com/nvm-sh/nvm
#https://github.com/nvm-sh/nvm#installing-and-updating

https://github.com/coreybutler/nvm-windows
#nvm-setup.zip

yarn

官网

https://yarn.bootcss.com/

下载地址

https://github.com/yarnpkg/yarn/releases

安装

npm install yarn -g

操作

yarn -V
yarn config get registry
yarn config set registry 'https://registry.npm.taobao.org/'

npm&cnpm

官网

https://npmmirror.com/

安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i -g nrm
nrm ls
nrm help
nrm use taobao

Nodejs安装

略

创建项目

手动创建项目

全局安装vue-cli，vue-cli
npm uninstall -g @vue/cli
npm install -g @vue/cli@3.11.0

安装webpack，它是打包js的工具
npm install -g webpack 

npm install -g @vue/cli-init

创建项目
vue init webpack vue-demo

运行项目
npm run dev

项目打包发布上线
npm run build

完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了

vueAdmin-template

vueAdmin-template是 一个简单的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint ，这些是必须的

git clone https://github.com/PanJiaChen/vue-admin-template.git

修改端口号

webpack创建的vue项目，端口号默认是8080
项目对应的 config 文件夹里的 index.js ,此时可以看到项目配置了 port:8080

vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/guide/#project-structure
https://juejin.cn/post/6844903476661583880

git clone https://github.com/PanJiaChen/vue-admin-template.git

修改端口号

webpack创建的vue项目，端口号默认是8080
项目对应的 config 文件夹里的 index.js ,此时可以看到项目配置了 port:8080

vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/guide/#project-structure