在舊電腦不堪重負(fù)下入手了新的電腦领跛，開一帖來記錄自己配置開發(fā)環(huán)境過程
- Node
官網(wǎng)下載 https://nodejs.org/en/download/
測試Node安裝
測試是否安裝成功。 打開終端铅搓，輸入node，出現(xiàn)>交互命令行陷寝，然后可以輸入console.log("Hello,World")锅很。
> console.log("Hello,World");
Hello,World
undefined
輸入.exit退出node，查看node和npm的版本凤跑。
node -v
npm -v
設(shè)置npm的默認(rèn)安裝路徑和緩存路徑
- 查看用戶配置
npm config ls
npm config list - 查看全部配置
npm config ls -l
npm config list -l
- Vue
npm i -g yarn
npm install vue
如果在安裝過程中出過一些錯誤爆安，可能是npm再mac權(quán)限不夠可以簡單的提權(quán)安裝
- webpack
sudo -s
npm install webpack -g
- vuecli
npm install -g @vue/cli
$ yarn global add @vue/cli-init
測試初始化
如果安裝的是vuex是4.0版本直接使用vue create test-app.
npm權(quán)限不夠 有以下幾種方法
- 使用nvm：https://github.com/creationix/nvm/blob/master/README.md#installation
在linux上，一條命令搞定nvm安裝:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
or
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.9/install.sh | bash
然后仔引，安裝node扔仓，注意：如果你已經(jīng)安裝了node，不用卸載舊的咖耘，直接安裝就好翘簇，nvm會替你管理版本的：
nvm install node 之后則不會出現(xiàn)問題。
p.s如果出現(xiàn)安裝后
nvm is already installed in /home/richard/.nvm, trying to update using git
的問題可以重新執(zhí)行curl安裝nvm儿倒，nvm的配置是放在~/.bash_profile里面版保。之后通過vim編輯來將下面配置寫入
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
- 更新npm權(quán)限
$ sudo npm i -g npm
后記
從官網(wǎng)下載 pkg 安裝包來安裝 NodeJS，但這種方式可能導(dǎo)致后續(xù)使用 NodeJS 時碰到很多不可預(yù)料的權(quán)限問題,最終還是選擇使用Homebrew來管理node
brew install nod夫否，找到tar.gz刪除
如果遇到安裝不上 可以執(zhí)行這個
cd /Users/czkm/Library/Caches/Homebrew/
rm -rf portable-ruby-2.3.3.leopard_64.bottle.1.tar.gz
遇到brew下載過慢
# 替換brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git
# 替換homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git
# 替換homebrew-bottles:
echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.aliyun.com/homebrew/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc
輸入node -v或npm -v 檢查安裝情況
這里安裝的 npm 是在 /usr/local/ 目錄下彻犁，默認(rèn)的全局
node_modules
文件夾也是在這個目錄下面，后續(xù)如果通過npm時會出現(xiàn)一些權(quán)限上的問題凰慈。建議修改全局 node_modules 文件夾的位置汞幢，把它改到我們自己的用戶目錄下。
- 首先在 home 目錄下新建一個給 npm 用的文件夾微谓，比如
~/.npm-global - 新建一個 ~/.npmrc 文件森篷，在里面寫上 prefix=~/.npm-global 。
cat ~/.npmrc - 使用 npm i -g webpack 安裝全局命令時豺型，都會被安裝到這個文件夾里了仲智，執(zhí)行
ls ~/.npm-global/bin就能看到剛剛安裝的 webpack 了。
source ~/.bash_profile
- 終端美化
1.檢查環(huán)境
輸入命令,檢查是否有/bin/zshmacOS自帶zsh
cat /etc/shells
2.修改環(huán)境
修改默認(rèn)的bash為zsh,重啟Terminal或者iterm2.
chsh -s /bin/zsh
檢查修改結(jié)果,顯示/bin/zsh即成功.
echo $SHELL
采用zsh代替bash触创，而zsh加載的是 ~/.zshrc文件坎藐，而 ‘.zshrc’ 文件中并沒有定義任務(wù)環(huán)境變量,需要在末尾處添加source ~/.bash_profile之后
source ~/.zshrc文件更新即可
- 安裝配置oh-my-zsh
1.安裝oh-my-zsh運行一鍵安裝包命令
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
2.配置oh-my-zsh主題下載powerlevel9k主題
git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
編輯.zshrc文件來修改oh-my-zsh主題
vi .zshrc
找到ZSH_THEME="robbyrussell"
改為ZSH_THEME="powerlevel9k/powerlevel9k"
Mac中VIM的 相關(guān)操作
i insert 進入編輯
Esc 退出編輯模式，輸入以下命令：
:wq 保存后退出vi哼绑，若為 :wq! 則為強制儲存后退出（常用）
:w 保存但不退出（常用）
:w! 若文件屬性為『只讀』時，強制寫入該檔案
:q 離開 vi （常用）
:q! 若曾修改過檔案碉咆，又不想儲存抖韩，使用 ! 為強制離開不儲存檔案。
:e! 將檔案還原到最原始的狀態(tài)疫铜！
- 配置Terminal,iTerm2,VSCode.
1.下載字體及主題下載Menlo-for-Powerline字體包,包內(nèi)字體分別雙擊安裝到系統(tǒng)內(nèi).
下載地址:https://github.com/stilleshan/files/raw/master/projects/vscode-zsh/Menlo-for-Powerline.zip
下載Solarized主題,包內(nèi)包含Terminal和iTerm2兩個軟件的5個主題.
推薦使用Solarized Dark Higher Contrast風(fēng)格,包內(nèi)含有全部5種風(fēng)格,請自行選擇.
下載地址:https://github.com/stilleshan/files/raw/master/projects/vscode-zsh/Solarized.zip
2.配置Terminal
在剛下載的Solarized包內(nèi),找到Solarized-for-Terminal中的Solarized Dark Higher Contrast.terminal,雙擊運行即打開Terminal.
- 此時因為字體文件未設(shè)置,有亂碼.
- 偏好設(shè)置->描述文件
- 左側(cè)Solarized Dark Higher Contrast->默認(rèn),設(shè)置為默認(rèn)主題.
-
字體選擇安裝好的Menlo for Powerline
屏幕快照 2019-10-20 下午4.11.54.png
image
3.配置iTerm2
官網(wǎng) https://www.iterm2.com/ 下載并安裝iTerm2
- Preferences-Profiles-Colors
- 右下角Color Presets選擇import導(dǎo)入Solarized Dark Higher - - - Contrast,并選擇此主題.
- Preferences-Profiles-Text
-
Font選擇安裝好的Menlo for Powerline即配置完畢.
image
image
image
4.配置VSCode
打開Vscode-找到設(shè)置-搜索setting.json并編輯
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",
"terminal.integrated.fontFamily": "Menlo for Powerline"
自用vscode插件列表
- Atom One Dark Theme
- Beautify
- Code Runner
- Debugger for Chrome
- ESLint
- eslint-disable-snippets
- GitLens — Git supercharged
- HTML CSS Support
- HTML Snippets
- JavaScript (ES6) code snippets
- Material Icon Theme
- npm
- open in browser
- Path Intellisense
- Power Mode
- Prettier - Code formatter
- Prettier - JavaScript formatter
- TabNine
- Vetur
- vscode-icons
- vscode-icons-mac
- vue
- Vue 2 Snippets
- Vue VSCode Snippets
- vue-helper
vscode使用的setting.json
{
// "workbench.colorTheme": "Github Light Theme - Gray",
"window.zoomLevel": 0,
"explorer.confirmDelete": false,
"git.confirmSync": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"breadcrumbs.enabled": true,
"editor.minimap.enabled": false,
// vscode默認(rèn)啟用了根據(jù)文件類型自動設(shè)置tabsize的選項
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// #每次保存的時候自動格式化
"editor.formatOnSave": true,
// #每次保存的時候?qū)⒋a按eslint格式進行修復(fù)
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"prettier.arrowParens": "always",
// },
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettier": {
"eslintIntegration": true,
"arrowParens": "always",
"semi": false,
"singleQuote": true
}
},
"workbench.iconTheme": "material-icon-theme",
"workbench.tree.indent": 40,
"workbench.tree.renderIndentGuides": "always",
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"explorer.confirmDragAndDrop": false,
"editor.fontWeight": "700",
"scss.lint.unknownProperties": "ignore",
"css.lint.unknownProperties": "ignore",
"scss.lint.vendorPrefix": "ignore",
"vetur.validation.style": false,
"window.menuBarVisibility": "default",
"workbench.sideBar.location": "left",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"workbench.activityBar.visible": true,
"editor.wordWrap": "on",
"fileheader.customMade": {
"Date": "Do not edit", // 文件創(chuàng)建時間(不變)
"LastEditors": "last_modified_by", // 文件最后編輯者
"LastEditTime": "Do not edit" // 文件最后編輯時間
},
"powermode.enabled": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vsicons.dontShowNewVersionMessage": true,
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"fileheader.Author": "czk",
"fileheader.LastModifiedBy": "czk",
"fileheader.tpl": "",
"terminal.integrated.rendererType": "dom", // 函數(shù)注釋
"alias-skip.mappings": {
"@": "/src" // 默認(rèn)只有`@`映射茂浮，映射到`/src`，你可以添加更多映射，映射路徑必須以`/`開頭
// ...更多映射關(guān)系
},
"workbench.colorTheme": "Atom One Dark",
"workbench.startupEditor": "welcomePage",
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",
"terminal.integrated.fontFamily": "Menlo for Powerline",
"diffEditor.ignoreTrimWhitespace": false
}
