vue环境搭建(node/npm/vscode相关)

一、安装或更新nodejs

1. 新安装nodejs

访问官网，根据自己的操作系统下载LTS版本安装即可

[推荐] mac系统可通过homebrew安装

brew update  # 更新homebrew
brew doctor  # 校验homebrew的完整性
brew install node  # 最好配置源,默认源下载较慢.https://www.jianshu.com/p/a6dce9c69f7e

2. 更新nodejs

xxx@Amio:~$ node -v
v10.15.0 # 当前最新LTS版本为:v12.18.1
######################################################
xxx@Amio:~$ npm cache clean -f
npm WARN using --force I sure hope you know what you are doing.
⸨░░░░░░░░░░░░░░░░░░⸩ ⠧ : WARN using --force I sure hope you know what you are doing.


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.9.0 → 6.14.5       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.5   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯
######################################################
xxx@Amio:~$ npm install n -g
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
+ n@6.5.1
added 1 package from 4 contributors in 0.932s
######################################################
xxx@Amio:~$ sudo n stable
Password:

  installing : node-v12.18.1
       mkdir : /usr/local/n/versions/node/12.18.1
       fetch : https://nodejs.org/dist/v12.18.1/node-v12.18.1-darwin-x64.tar.xz
   installed : v12.18.1 (with npm 6.14.5)
######################################################
xxx@Amio:~$ node -v
v12.18.1

二、安装或更新npm

1. 新安装npm

一般nodejs环境安装完后npm环境会自动安装完，可通过npm -v查验

xxx@Amio:~$ npm -v
6.9.0  # 最新版本为: 6.14.5

2. 更新npm

xxx@Amio:~$ sudo npm install -g npm
/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
+ npm@6.14.5
updated 1 package in 10.06s

三、卸载nodejs和npm(mac系统)

我本机的npm配置如下:

xxx@Amio:~/node_modules$ npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.5 node/v12.18.1 darwin x64"

; userconfig /Users/xxx/.npmrc
cache = "/Users/xxx/mode_modules/node_cache"
prefix = "/Users/xxx/mode_modules/node_global"

; node bin location = /usr/local/bin/node
; cwd = /Users/xxx/node_modules
; HOME = /Users/xxx
; "npm config ls -l" to show all defaults.

1. 使用homebrew安装的

brew uninstall node

2. 如果使用官网下载的pkg安装的

注意：以下方法不一定能彻底删除

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}
sudo rm -rf /usr/local/lib/node_modules
sudo rm -rf ~/.npm
sudo rm -rf ~/.node-gyp
sudo rm -rf ~/.node_repl_history
sudo rm -rf ~/.npmrc
sudo rm -rf ~/.npminstall_tarball

四、npm相关配置

1. 包的默认安装路径

mac系统下，使用npm install xxx -g默认安装在usr/local/lib/node_nodules/xxx下

xxx@Amio:/usr/local/lib/node_modules$ ll
total 0
drwxr-xr-x  10 xxx  admin  340  6 26 10:05 ./
drwxrwxr-x   5 xxx  admin  170  5 21 17:07 ../
drwxr-xr-x   4 root         admin  136  2 17  2019 .bin/
drwxr-xr-x   3 xxx  admin  102  8 26  2019 @vue/
drwxr-xr-x  11 xxx  admin  374  7 21  2019 eslint/
drwxr-xr-x   8 xxx  admin  272  2 24  2019 js-cookie/
drwxr-xr-x   7 xxx  admin  238  6 26 10:01 n/
drwxr-xr-x  24 xxx  admin  816  6 26 10:05 npm/
drwxr-xr-x  20 xxx  admin  680  7 20  2019 prettier/
drwxr-xr-x   9 xxx  admin  306  3  2  2019 vue-svgicon/

2. 更改全局安装路径

在usr/local/lib/node_nodules/新建node_cache、node_global目录

xxx@Amio:/usr/local/lib/node_modules$ npm config set cache "/usr/local/lib/node_modules/node_cache"
xxx@Amio:/usr/local/lib/node_modules$ npm config set prefix "/usr/local/lib/node_modules/node_global"

3. npm换源

npm config set registry https://registry.npm.taobao.org/
# 官方源: http://www.npmjs.org

五、npm常见命令

# 配置相关
npm config list  # 查看配置
npm config set cache/prefix/... "xxx"  # 配置
npm config get cache/prefix/...  # 查看某一项配置
npm config delete cache/prefix/...  # 删除某一项配置

# 安装与卸载
npm install xxx -g  # 全局安装xxx
npm uninstall xxx -g  # 全局卸载xxx
npm install --save xxx  # 写入package.json中的dependencies选项中
npm install --save-dev xxx  # 写入package.json中的devDependencies选项中
npm uninstall --save xxx  # 从dependencies中删除
npm uninstall --save-dev xxx  # 从devDependencies中删除

npm cache clean -f  # 清理缓存

六、npm install @vue/cli -g安装后提示vue命令找不到

xxx@desktop-imbqh7t  ~  npm install -g @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
/Users/xxx/node_modules/node_global/bin/vue -> /Users/xxx/node_modules/node_global/lib/node_modules/@vue/cli/bin/vue.js
+ @vue/cli@4.4.6
added 5 packages from 4 contributors and updated 3 packages in 53.226s
######################################################
xxx@desktop-imbqh7t  ~/node_modules/node_global/bin  vue -v
zsh: command not found: vue

原因：上述，我们给node配置了global安装的路径(/Users/xxx/node_modules/node_global/bin/vue)，但这个路径不在环境变量中

解决方法：

cd
vim .bash_profile
export PATH=$PATH:/Users/xxx/node_modules/node_global/bin
source .bash_profile
vue -V

七、VSCode的相关配置

1. 常用插件

• Vetur - 支持语法高亮、格式化、自动联想、代码段、Emmet等
• Eslint - 语法纠错
• Auto Close Tag - 自动闭合HTML/XML标签
• Auto Rename Tag - 自动完成另一侧标签的同步修改
• open in browser - 右键项目从浏览器打开

2. eslint配置

配置之前，务必本地全局安装eslint、prettier。

• vscode用户配置(commod+, 或首选项->设置)

进入后，点击右上角"打开设置"按钮，添加如下内容:

{
  "editor.fontSize": 12,
  "editor.renderWhitespace": "all",
  "workbench.sideBar.location": "left",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "editor.suggestSelection": "first",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 关闭默认启用tabsize选项并重新设置为2
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  //.vue文件template格式化支持，并使用js-beautify-html插件
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  //js-beautify-html格式化配置，属性强制换行
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_attributes": "force-aligned"
  //   }
  // },
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 检查的文件类型
  "eslint.validate": ["typescript", "javascript", "javascriptreact", "vue"],
  // //保存时eslint自动修复错误
  // "eslint.autoFixOnSave": true,
  //保存自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //开启 eslint 支持
  "prettier.eslintIntegration": true,
  //使用单引号
  "prettier.singleQuote": true,
  //结尾不加分号
  "prettier.semi": false,
  // 不尾随逗号
  "prettier.trailingComma": "none"
}

• eslintrc.js配置

配置之前必须先安装npm install --save-dev eslint-config-vue eslint-plugin-vue

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': ["error", "always", { "null": "ignore" }],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, {
      'allowLoop': false,
      'allowSwitch': false
    }],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, {
      'max': 1
    }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [2, {
      'initialized': 'never'
    }],
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }],
    'semi': [2, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false
    }],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  },
};