mac安装vue开发环境

617 阅读3分钟

Homebrew 1.2.4 node.js v6.11.1 npm 5.0.3 webpack 3.2.0 Vue 2.8.2

1、安装brew 打开终端运行以下命令:

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装完成后查看版本信息

brew -v

2.安装node.js

安装nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

如果无法访问可以使用文章末尾脚本

nvm常用命令

nvm ls-remote 列出所有可安装的版本

nvm install <version> 安装指定的版本,如 nvm install v8.14.0

nvm uninstall <version> 卸载指定的版本

nvm ls 列出所有已经安装的版本

nvm use <version> 切换使用指定的版本

nvm current 显示当前使用的版本

nvm alias default <version> 设置默认 node 版本

nvm deactivate 解除当前版本绑定

安装后查看版本信息

node -v

3.获得node安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

4.安装淘宝镜像

5.安装webback

cnpm install webpack -g

6.安装vue脚手架

cnpm install vue-cli -g

7.找一个存放项目的目录,根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>
如下
vue init webpack-simple demo1

碰到的提示可以直接回车默认

8.进入工程,安装依赖

cnpm instal

10.启动项目

npm run dev

11.构建项目

npm run build

vue基本开发教程 juejin.cn/post/684490…

遇到的问题

1.npm install 报错依赖冲突

image.png npm版本过高会严格校验冲突,暂时用npm i --legacy-peer-deps降低版本解决

附录

安装nvm脚本

#!/usr/bin/env bash

\


{ # this ensures the entire script is downloaded #

\


nvm_has() {

type "$1" > /dev/null 2>&1

}

\


nvm_echo() {

command printf %s\\n "$*" 2>/dev/null

}

\


nvm_grep() {

GREP_OPTIONS='' command grep "$@"

}

\


nvm_default_install_dir() {

[ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm"

}

\


nvm_install_dir() {

if [ -n "$NVM_DIR" ]; then

printf %s "${NVM_DIR}"

else

nvm_default_install_dir

fi

}

\


nvm_latest_version() {

nvm_echo "v0.39.0"

}

\


nvm_profile_is_bash_or_zsh() {

local TEST_PROFILE

TEST_PROFILE="${1-}"

case "${TEST_PROFILE-}" in

*"/.bashrc" | *"/.bash_profile" | *"/.zshrc")

return

;;

*)

return 1

;;

esac

}

\


#

# Outputs the location to NVM depending on:

# * The availability of $NVM_SOURCE

# * The method used ("script" or "git" in the script, defaults to "git")

# NVM_SOURCE always takes precedence unless the method is "script-nvm-exec"

#

nvm_source() {

local NVM_GITHUB_REPO

NVM_GITHUB_REPO="${NVM_INSTALL_GITHUB_REPO:-nvm-sh/nvm}"

local NVM_VERSION

NVM_VERSION="${NVM_INSTALL_VERSION:-$(nvm_latest_version)}"

local NVM_METHOD

NVM_METHOD="$1"

local NVM_SOURCE_URL

NVM_SOURCE_URL="$NVM_SOURCE"

if [ "_$NVM_METHOD" = "_script-nvm-exec" ]; then

NVM_SOURCE_URL="https://raw.githubusercontent.com/${NVM_GITHUB_REPO}/${NVM_VERSION}/nvm-exec"

elif [ "_$NVM_METHOD" = "_script-nvm-bash-completion" ]; then

NVM_SOURCE_URL="https://raw.githubusercontent.com/${NVM_GITHUB_REPO}/${NVM_VERSION}/bash_completion"

elif [ -z "$NVM_SOURCE_URL" ]; then

if [ "_$NVM_METHOD" = "_script" ]; then

NVM_SOURCE_URL="https://raw.githubusercontent.com/${NVM_GITHUB_REPO}/${NVM_VERSION}/nvm.sh"

elif [ "_$NVM_METHOD" = "_git" ] || [ -z "$NVM_METHOD" ]; then

NVM_SOURCE_URL="https://github.com/${NVM_GITHUB_REPO}.git"

else

nvm_echo >&2 "Unexpected value \"$NVM_METHOD\" for \$NVM_METHOD"

return 1

fi

fi

nvm_echo "$NVM_SOURCE_URL"

}

\


#

# Node.js version to install

#

nvm_node_version() {

nvm_echo "$NODE_VERSION"

}

\


nvm_download() {

if nvm_has "curl"; then

curl --fail --compressed -q "$@"

elif nvm_has "wget"; then

# Emulate curl with wget

ARGS=$(nvm_echo "$@" | command sed -e 's/--progress-bar /--progress=bar /' \

-e 's/--compressed //' \

-e 's/--fail //' \

-e 's/-L //' \

-e 's/-I /--server-response /' \

-e 's/-s /-q /' \

-e 's/-sS /-nv /' \

-e 's/-o /-O /' \

-e 's/-C - /-c /')

# shellcheck disable=SC2086

eval wget $ARGS

fi

}

\


install_nvm_from_git() {

local INSTALL_DIR

INSTALL_DIR="$(nvm_install_dir)"

local NVM_VERSION

NVM_VERSION="${NVM_INSTALL_VERSION:-$(nvm_latest_version)}"

if [ -n "${NVM_INSTALL_VERSION:-}" ]; then

# Check if version is an existing ref

if command git ls-remote "$(nvm_source "git")" "$NVM_VERSION" | nvm_grep -q "$NVM_VERSION" ; then

:

# Check if version is an existing changeset

elif ! nvm_download -o /dev/null "$(nvm_source "script-nvm-exec")"; then

nvm_echo >&2 "Failed to find '$NVM_VERSION' version."

exit 1

fi

fi

\


local fetch_error

if [ -d "$INSTALL_DIR/.git" ]; then

# Updating repo

nvm_echo "=> nvm is already installed in $INSTALL_DIR, trying to update using git"

command printf '\r=> '

fetch_error="Failed to update nvm with $NVM_VERSION, run 'git fetch' in $INSTALL_DIR yourself."

else

fetch_error="Failed to fetch origin with $NVM_VERSION. Please report this!"

nvm_echo "=> Downloading nvm from git to '$INSTALL_DIR'"

command printf '\r=> '

mkdir -p "${INSTALL_DIR}"

if [ "$(ls -A "${INSTALL_DIR}")" ]; then

# Initializing repo

command git init "${INSTALL_DIR}" || {

nvm_echo >&2 'Failed to initialize nvm repo. Please report this!'

exit 2

}

command git --git-dir="${INSTALL_DIR}/.git" remote add origin "$(nvm_source)" 2> /dev/null \

|| command git --git-dir="${INSTALL_DIR}/.git" remote set-url origin "$(nvm_source)" || {

nvm_echo >&2 'Failed to add remote "origin" (or set the URL). Please report this!'

exit 2

}

else

# Cloning repo

command git clone "$(nvm_source)" --depth=1 "${INSTALL_DIR}" || {

nvm_echo >&2 'Failed to clone nvm repo. Please report this!'

exit 2

}

fi

fi

# Try to fetch tag

if command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" fetch origin tag "$NVM_VERSION" --depth=1 2>/dev/null; then

:

# Fetch given version

elif ! command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" fetch origin "$NVM_VERSION" --depth=1; then

nvm_echo >&2 "$fetch_error"

exit 1

fi

command git -c advice.detachedHead=false --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" checkout -f --quiet FETCH_HEAD || {

nvm_echo >&2 "Failed to checkout the given version $NVM_VERSION. Please report this!"

exit 2

}

if [ -n "$(command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" show-ref refs/heads/master)" ]; then

if command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" branch --quiet 2>/dev/null; then

command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" branch --quiet -D master >/dev/null 2>&1

else

nvm_echo >&2 "Your version of git is out of date. Please update it!"

command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" branch -D master >/dev/null 2>&1

fi

fi

\


nvm_echo "=> Compressing and cleaning up git repository"

if ! command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" reflog expire --expire=now --all; then

nvm_echo >&2 "Your version of git is out of date. Please update it!"

fi

if ! command git --git-dir="$INSTALL_DIR"/.git --work-tree="$INSTALL_DIR" gc --auto --aggressive --prune=now ; then

nvm_echo >&2 "Your version of git is out of date. Please update it!"

fi

return

}

\


#

# Automatically install Node.js

#

nvm_install_node() {

local NODE_VERSION_LOCAL

NODE_VERSION_LOCAL="$(nvm_node_version)"

\


if [ -z "$NODE_VERSION_LOCAL" ]; then

return 0

fi

\


nvm_echo "=> Installing Node.js version $NODE_VERSION_LOCAL"

nvm install "$NODE_VERSION_LOCAL"

local CURRENT_NVM_NODE

\


CURRENT_NVM_NODE="$(nvm_version current)"

if [ "$(nvm_version "$NODE_VERSION_LOCAL")" == "$CURRENT_NVM_NODE" ]; then

nvm_echo "=> Node.js version $NODE_VERSION_LOCAL has been successfully installed"

else

nvm_echo >&2 "Failed to install Node.js $NODE_VERSION_LOCAL"

fi

}

\


install_nvm_as_script() {

local INSTALL_DIR

INSTALL_DIR="$(nvm_install_dir)"

local NVM_SOURCE_LOCAL

NVM_SOURCE_LOCAL="$(nvm_source script)"

local NVM_EXEC_SOURCE

NVM_EXEC_SOURCE="$(nvm_source script-nvm-exec)"

local NVM_BASH_COMPLETION_SOURCE

NVM_BASH_COMPLETION_SOURCE="$(nvm_source script-nvm-bash-completion)"

\


# Downloading to $INSTALL_DIR

mkdir -p "$INSTALL_DIR"

if [ -f "$INSTALL_DIR/nvm.sh" ]; then

nvm_echo "=> nvm is already installed in $INSTALL_DIR, trying to update the script"

else

nvm_echo "=> Downloading nvm as script to '$INSTALL_DIR'"

fi

nvm_download -s "$NVM_SOURCE_LOCAL" -o "$INSTALL_DIR/nvm.sh" || {

nvm_echo >&2 "Failed to download '$NVM_SOURCE_LOCAL'"

return 1

} &

nvm_download -s "$NVM_EXEC_SOURCE" -o "$INSTALL_DIR/nvm-exec" || {

nvm_echo >&2 "Failed to download '$NVM_EXEC_SOURCE'"

return 2

} &

nvm_download -s "$NVM_BASH_COMPLETION_SOURCE" -o "$INSTALL_DIR/bash_completion" || {

nvm_echo >&2 "Failed to download '$NVM_BASH_COMPLETION_SOURCE'"

return 2

} &

for job in $(jobs -p | command sort)

do

wait "$job" || return $?

done

chmod a+x "$INSTALL_DIR/nvm-exec" || {

nvm_echo >&2 "Failed to mark '$INSTALL_DIR/nvm-exec' as executable"

return 3

}

}

\


nvm_try_profile() {

if [ -z "${1-}" ] || [ ! -f "${1}" ]; then

return 1

fi

nvm_echo "${1}"

}

\


#

# Detect profile file if not specified as environment variable

# (eg: PROFILE=~/.myprofile)

# The echo'ed path is guaranteed to be an existing file

# Otherwise, an empty string is returned

#

nvm_detect_profile() {

if [ "${PROFILE-}" = '/dev/null' ]; then

# the user has specifically requested NOT to have nvm touch their profile

return

fi

\


if [ -n "${PROFILE}" ] && [ -f "${PROFILE}" ]; then

nvm_echo "${PROFILE}"

return

fi

\


local DETECTED_PROFILE

DETECTED_PROFILE=''

\


if [ "${SHELL#*bash}" != "$SHELL" ]; then

if [ -f "$HOME/.bashrc" ]; then

DETECTED_PROFILE="$HOME/.bashrc"

elif [ -f "$HOME/.bash_profile" ]; then

DETECTED_PROFILE="$HOME/.bash_profile"

fi

elif [ "${SHELL#*zsh}" != "$SHELL" ]; then

if [ -f "$HOME/.zshrc" ]; then

DETECTED_PROFILE="$HOME/.zshrc"

fi

fi

\


if [ -z "$DETECTED_PROFILE" ]; then

for EACH_PROFILE in ".profile" ".bashrc" ".bash_profile" ".zshrc"

do

if DETECTED_PROFILE="$(nvm_try_profile "${HOME}/${EACH_PROFILE}")"; then

break

fi

done

fi

\


if [ -n "$DETECTED_PROFILE" ]; then

nvm_echo "$DETECTED_PROFILE"

fi

}

\


#

# Check whether the user has any globally-installed npm modules in their system

# Node, and warn them if so.

#

nvm_check_global_modules() {

local NPM_COMMAND

NPM_COMMAND="$(command -v npm 2>/dev/null)" || return 0

[ -n "${NVM_DIR}" ] && [ -z "${NPM_COMMAND%%$NVM_DIR/*}" ] && return 0

\


local NPM_VERSION

NPM_VERSION="$(npm --version)"

NPM_VERSION="${NPM_VERSION:--1}"

[ "${NPM_VERSION%%[!-0-9]*}" -gt 0 ] || return 0

\


local NPM_GLOBAL_MODULES

NPM_GLOBAL_MODULES="$(

npm list -g --depth=0 |

command sed -e '/ npm@/d' -e '/ (empty)$/d'

)"

\


local MODULE_COUNT

MODULE_COUNT="$(

command printf %s\\n "$NPM_GLOBAL_MODULES" |

command sed -ne '1!p' | # Remove the first line

wc -l | command tr -d ' ' # Count entries

)"

\


if [ "${MODULE_COUNT}" != '0' ]; then

# shellcheck disable=SC2016

nvm_echo '=> You currently have modules installed globally with `npm`. These will no'

# shellcheck disable=SC2016

nvm_echo '=> longer be linked to the active version of Node when you install a new node'

# shellcheck disable=SC2016

nvm_echo '=> with `nvm`; and they may (depending on how you construct your `$PATH`)'

# shellcheck disable=SC2016

nvm_echo '=> override the binaries of modules installed with `nvm`:'

nvm_echo

\


command printf %s\\n "$NPM_GLOBAL_MODULES"

nvm_echo '=> If you wish to uninstall them at a later point (or re-install them under your'

# shellcheck disable=SC2016

nvm_echo '=> `nvm` Nodes), you can remove them from the system Node as follows:'

nvm_echo

nvm_echo ' $ nvm use system'

nvm_echo ' $ npm uninstall -g a_module'

nvm_echo

fi

}

\


nvm_do_install() {

if [ -n "${NVM_DIR-}" ] && ! [ -d "${NVM_DIR}" ]; then

if [ -e "${NVM_DIR}" ]; then

nvm_echo >&2 "File \"${NVM_DIR}\" has the same name as installation directory."

exit 1

fi

\


if [ "${NVM_DIR}" = "$(nvm_default_install_dir)" ]; then

mkdir "${NVM_DIR}"

else

nvm_echo >&2 "You have \$NVM_DIR set to \"${NVM_DIR}\", but that directory does not exist. Check your profile files and environment."

exit 1

fi

fi

if [ -z "${METHOD}" ]; then

# Autodetect install method

if nvm_has git; then

install_nvm_from_git

elif nvm_has nvm_download; then

install_nvm_as_script

else

nvm_echo >&2 'You need git, curl, or wget to install nvm'

exit 1

fi

elif [ "${METHOD}" = 'git' ]; then

if ! nvm_has git; then

nvm_echo >&2 "You need git to install nvm"

exit 1

fi

install_nvm_from_git

elif [ "${METHOD}" = 'script' ]; then

if ! nvm_has nvm_download; then

nvm_echo >&2 "You need curl or wget to install nvm"

exit 1

fi

install_nvm_as_script

else

nvm_echo >&2 "The environment variable \$METHOD is set to \"${METHOD}\", which is not recognized as a valid installation method."

exit 1

fi

\


nvm_echo

\


local NVM_PROFILE

NVM_PROFILE="$(nvm_detect_profile)"

local PROFILE_INSTALL_DIR

PROFILE_INSTALL_DIR="$(nvm_install_dir | command sed "s:^$HOME:\$HOME:")"

\


SOURCE_STR="\\nexport NVM_DIR=\"${PROFILE_INSTALL_DIR}\"\\n[ -s \"\$NVM_DIR/nvm.sh\" ] && \\. \"\$NVM_DIR/nvm.sh\" # This loads nvm\\n"

\


# shellcheck disable=SC2016

COMPLETION_STR='[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion\n'

BASH_OR_ZSH=false

\


if [ -z "${NVM_PROFILE-}" ] ; then

local TRIED_PROFILE

if [ -n "${PROFILE}" ]; then

TRIED_PROFILE="${NVM_PROFILE} (as defined in \$PROFILE), "

fi

nvm_echo "=> Profile not found. Tried ${TRIED_PROFILE-}~/.bashrc, ~/.bash_profile, ~/.zshrc, and ~/.profile."

nvm_echo "=> Create one of them and run this script again"

nvm_echo " OR"

nvm_echo "=> Append the following lines to the correct file yourself:"

command printf "${SOURCE_STR}"

nvm_echo

else

if nvm_profile_is_bash_or_zsh "${NVM_PROFILE-}"; then

BASH_OR_ZSH=true

fi

if ! command grep -qc '/nvm.sh' "$NVM_PROFILE"; then

nvm_echo "=> Appending nvm source string to $NVM_PROFILE"

command printf "${SOURCE_STR}" >> "$NVM_PROFILE"

else

nvm_echo "=> nvm source string already in ${NVM_PROFILE}"

fi

# shellcheck disable=SC2016

if ${BASH_OR_ZSH} && ! command grep -qc '$NVM_DIR/bash_completion' "$NVM_PROFILE"; then

nvm_echo "=> Appending bash_completion source string to $NVM_PROFILE"

command printf "$COMPLETION_STR" >> "$NVM_PROFILE"

else

nvm_echo "=> bash_completion source string already in ${NVM_PROFILE}"

fi

fi

if ${BASH_OR_ZSH} && [ -z "${NVM_PROFILE-}" ] ; then

nvm_echo "=> Please also append the following lines to the if you are using bash/zsh shell:"

command printf "${COMPLETION_STR}"

fi

\


# Source nvm

# shellcheck source=/dev/null

\. "$(nvm_install_dir)/nvm.sh"

\


nvm_check_global_modules

\


nvm_install_node

\


nvm_reset

\


nvm_echo "=> Close and reopen your terminal to start using nvm or run the following to use it now:"

command printf "${SOURCE_STR}"

if ${BASH_OR_ZSH} ; then

command printf "${COMPLETION_STR}"

fi

}

\


#

# Unsets the various functions defined

# during the execution of the install script

#

nvm_reset() {

unset -f nvm_has nvm_install_dir nvm_latest_version nvm_profile_is_bash_or_zsh \

nvm_source nvm_node_version nvm_download install_nvm_from_git nvm_install_node \

install_nvm_as_script nvm_try_profile nvm_detect_profile nvm_check_global_modules \

nvm_do_install nvm_reset nvm_default_install_dir nvm_grep

}

\


[ "_$NVM_ENV" = "_testing" ] || nvm_do_install

\


} # this ensures the entire script is downloaded #