vue 开发环境搭建

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\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

4 安装 cnpm， 因为众所周知的原因npm有时候安装失败，使用 npm 的国内镜像 cnpm 比较方便

npm install -g cnpm --registry=http://registry.npm.taobao.org

4.1 在系统变量 path 里设置 的路径, 因为cnpm会被安装到D:\Program Files\nodejs\node_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