MacOS 中搭建vue工做環境

MacOS 中搭建vue工做環境

在舊電腦不堪重負下入手了新的電腦,開一帖來記錄本身配置開發環境過程javascript

  • Node

官網下載 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

  • 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.webpack

npm權限不夠 有如下幾種方法git

  1. 使用nvm:github.com/creationix/… 在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,注意:若是你已經安裝了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
複製代碼
  1. 更新npm權限
$ 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 文件夾的位置,把它改到咱們本身的用戶目錄下。

  • 首先在 home 目錄下新建一個給 npm 用的文件夾,好比 ~/.npm-global
  • 新建一個 ~/.npmrc 文件,在裏面寫上 prefix=~/.npm-global 。cat ~/.npmrc
  • 使用 npm i -g webpack 安裝全局命令時,都會被安裝到這個文件夾裏了,執行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文件更新便可

  • 安裝配置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的 相關操做

i   insert 進入編輯
Esc 退出編輯模式,輸入如下命令:

:wq 保存後退出vi,若爲 :wq! 則爲強制儲存後退出(經常使用)

:w 保存但不退出(經常使用)

:w! 若文件屬性爲『只讀』時,強制寫入該檔案

:q 離開 vi (經常使用)

:q! 若曾修改過檔案,又不想儲存,使用 ! 爲強制離開不儲存檔案。

:e! 將檔案還原到最原始的狀態!
複製代碼
  • 配置Terminal,iTerm2,VSCode.

1.下載字體及主題下載Menlo-for-Powerline字體包,包內字體分別雙擊安裝到系統內.

下載地址:github.com/stilleshan/…

下載Solarized主題,包內包含Terminal和iTerm2兩個軟件的5個主題.

推薦使用Solarized Dark Higher Contrast風格,包內含有所有5種風格,請自行選擇.

下載地址:github.com/stilleshan/…

2.配置Terminal

在剛下載的Solarized包內,找到Solarized-for-Terminal中的Solarized Dark Higher Contrast.terminal,雙擊運行即打開Terminal.

  • 此時由於字體文件未設置,有亂碼.
  • 偏好設置->描述文件
  • 左側Solarized Dark Higher Contrast->默認,設置爲默認主題.
  • 字體選擇安裝好的Menlo for Powerline 屏幕快照 2019-10-20 下午4.11.54.png

3.配置iTerm2 官網 www.iterm2.com/ 下載並安裝iTerm2

  • Preferences-Profiles-Colors
  • 右下角Color Presets選擇import導入Solarized Dark Higher - - - Contrast,並選擇此主題.
  • Preferences-Profiles-Text
  • Font選擇安裝好的Menlo for Powerline即配置完畢.
    4.配置VSCode 打開Vscode-找到設置-搜索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默認啓用了根據文件類型自動設置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
}
複製代碼
相關文章
相關標籤/搜索