在舊電腦不堪重負下入手了新的電腦,開一帖來記錄本身配置開發環境過程javascript
官網下載 nodejs.org/en/download… 測試Node安裝 測試是否安裝成功。 打開終端,輸入node,出現>交互命令行,而後能夠輸入console.log("Hello,World")。
css
> console.log("Hello,World");
Hello,World
undefined
複製代碼
輸入.exit退出node,查看node和npm的版本。html
node -v
npm -v
複製代碼
設置npm的默認安裝路徑和緩存路徑vue
查看用戶配置 npm config ls npm config listjava
查看所有配置 npm config ls -l npm config list -lnode
Vuereact
npm i -g yarn
npm install vue
複製代碼
若是在安裝過程當中出過一些錯誤,多是npm再mac權限不夠能夠簡單的提權安裝linux
sudo -s
npm install webpack -g
複製代碼
npm install -g @vue/cli
$ yarn global add @vue/cli-init
複製代碼
測試初始化 若是安裝的是vuex是4.0版本直接使用vue create test-app.
webpack
npm權限不夠 有如下幾種方法git
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,注意:若是你已經安裝了node,不用卸載舊的,直接安裝就好,nvm會替你管理版本的: nvm install node
以後則不會出現問題。
p.s若是出現安裝後
nvm is already installed in /home/richard/.nvm, trying to update using git
複製代碼
的問題能夠從新執行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
複製代碼
$ sudo npm i -g npm
複製代碼
從官網下載 pkg 安裝包來安裝 NodeJS,但這種方式可能致使後續使用 NodeJS 時碰到不少不可預料的權限問題,最終仍是選擇使用Homebrew來管理node
brew install nod,找到tar.gz刪除
複製代碼
若是遇到安裝不上 能夠執行這個
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/ 目錄下,默認的全局 node_modules
文件夾也是在這個目錄下面,後續若是經過npm時會出現一些權限上的問題。建議修改全局 node_modules
文件夾的位置,把它改到咱們本身的用戶目錄下。
~/.npm-global
cat ~/.npmrc
ls ~/.npm-global/bin
就能看到剛剛安裝的 webpack 了。source ~/.bash_profile
複製代碼
1.檢查環境 輸入命令,檢查是否有/bin/zshmacOS自帶zsh
cat /etc/shells
複製代碼
2.修改環境 修改默認的bash爲zsh,重啓Terminal或者iterm2.
chsh -s /bin/zsh
複製代碼
檢查修改結果,顯示/bin/zsh即成功.
echo $SHELL
複製代碼
採用zsh代替bash,而zsh加載的是 ~/.zshrc文件
,而 ‘.zshrc’ 文件中並無定義任務環境變量,須要在末尾處添加source ~/.bash_profile
以後 source ~/.zshrc文件
更新便可
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的 相關操做
i insert 進入編輯
Esc 退出編輯模式,輸入如下命令:
:wq 保存後退出vi,若爲 :wq! 則爲強制儲存後退出(經常使用)
:w 保存但不退出(經常使用)
:w! 若文件屬性爲『只讀』時,強制寫入該檔案
:q 離開 vi (經常使用)
:q! 若曾修改過檔案,又不想儲存,使用 ! 爲強制離開不儲存檔案。
:e! 將檔案還原到最原始的狀態!
複製代碼
1.下載字體及主題下載Menlo-for-Powerline字體包,包內字體分別雙擊安裝到系統內.
下載Solarized主題,包內包含Terminal和iTerm2兩個軟件的5個主題.
推薦使用Solarized Dark Higher Contrast風格,包內含有所有5種風格,請自行選擇.
2.配置Terminal
在剛下載的Solarized包內,找到Solarized-for-Terminal中的Solarized Dark Higher Contrast.terminal,雙擊運行即打開Terminal.
3.配置iTerm2 官網 www.iterm2.com/ 下載並安裝iTerm2
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",
"terminal.integrated.fontFamily": "Menlo for Powerline"
複製代碼
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默認啓用了根據文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
// 從新設定tabsize
"editor.tabSize": 2,
// #每次保存的時候自動格式化
"editor.formatOnSave": true,
// #每次保存的時候將代碼按eslint格式進行修復
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉代碼結尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
// #讓函數(名)和後面的括號之間加個空格
"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", // 文件建立時間(不變)
"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", // 函數註釋
"alias-skip.mappings": {
"@": "/src" // 默認只有`@`映射,映射到`/src`,你能夠添加更多映射,映射路徑必須以`/`開頭
// ...更多映射關係
},
"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
}
複製代碼