MacOS 中搭建vue工做环境

时间 2019-11-06

标签 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

使用nvm：github.com/creationix/… 在linux上，一条命令搞定nvm安装:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
复制代码

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
复制代码

更新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/…

GitHub项目地址

下载Solarized主题,包内包含Terminal和iTerm2两个软件的5个主题.

推荐使用Solarized Dark Higher Contrast风格,包内含有所有5种风格,请自行选择.

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

GitHub项目地址

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
}
复制代码