1 开发vue需要基础环境
node + vue + vscode
2 安装node.js ,下载地址：https://nodejs.org/download/release/latest-v14.x/node-v14.15.1-x64.msi
安装完后测试 npm node 是否安装成功
node -v
npm -v
3 改变nodeJS原有的环境变量,即改变nodeJS全局安装模块的默认目录, 便于管理
npm config set prefix "D:Program Files odejs ode_global" npm config set cache "D:Program Files odejs ode_cache"
4 安装 cnpm， 因为众所周知的原因npm有时候安装失败，使用 npm 的国内镜像 cnpm 比较方便
npm install -g cnpm --registry=http://registry.npm.taobao.org
4.1 在系统变量 path 里设置 的路径, 因为cnpm会被安装到D:Program Files odejs ode_global下,以便 快速执行cnpm
检查cnpm是否安装
cnpm -v
5 安装 vue-cli
npm install -g vue-cli
5.1 检查 vue 版本
vue -V
6 初始化 vue项目
vue init webpack project
6.1 安装依赖并运行
cd peoject
npm install
npm run dev
7 vscode 环境配置，安装了如下插件
8 配置：文件 -》 首选项 -》 设置
{ "window.zoomLevel": 0, "files.autoSave": "off", "typescript.updateImportsOnFileMove.enabled": "always", "git.confirmSync": false, "editor.minimap.enabled": true, "workbench.startupEditor": "newUntitledFile", "git.autofetch": true, "eslint.validate": [ "javascript", "javascriptreact", "vue" ], "vetur.validation.template": true, "vetur.format.enable": true, "vetur.format.defaultFormatter.js":"vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html", "prettier.singleQuote": true, "prettier.semi": false, "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "workbench.settings.editor": "json", "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[jsonc]": { "editor.defaultFormatter": "HookyQR.beautify" } }
9 VScode 常用快捷键
直接删除某一行：shift+delete或者ctrl+shift+k 多行光标选择：alt+鼠标左键 自动生成html结构和meta声明：首先输入“!”，然后按tab键 标签自动补全：tab键 折叠所有代码：ctrl+k、ctrl+0 拆分编辑器：ctrl+ 查找框右边的3个参数分别为：区分大小写，全字匹配，使用正则 跳转行号：ctrl+G 添加函数注释：在函数上方输入“/**”，然后点击enter 格式化：alt+shift+f 注释：ctrl+/ 全部保存：ctrl+k, 然后只按s一个键 向上移动一行：alt+↑ 向下移动一行：alt+↓ 向上复制一行：alt+shift+↑ 向下复制一行：alt+shift+↓ 查找：ctrl+F 替换：ctrl+H 文件夹中查找：ctrl+shift+f