访问官网,根据自己的操作系统下载LTS
版本安装即可
[推荐] mac
系统可通过homebrew
安装
brew update # 更新homebrew
brew doctor # 校验homebrew的完整性
brew install node # 最好配置源,默认源下载较慢.https://www.jianshu.com/p/a6dce9c69f7e
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
+ [email protected]
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
一般nodejs
环境安装完后npm
环境会自动安装完,可通过npm -v
查验
xxx@Amio:~$ npm -v
6.9.0 # 最新版本为: 6.14.5
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
+ [email protected]
updated 1 package in 10.06s
我本机的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.
homebrew
安装的brew uninstall node
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
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/
在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"
npm config set registry https://registry.npm.taobao.org/
# 官方源: http://www.npmjs.org
# 配置相关
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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: 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/[email protected]
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
配置之前,务必本地全局安装eslint
、prettier
。
进入后,点击右上角"打开设置"按钮,添加如下内容:
{
"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"
}
配置之前必须先安装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']
},
};