macOS Setup for Vue

vueSetup.md

macOS setup for Vue

Install macOS :P

Install Homebrew

Open terminal and run the follow command to install the latest version of Homebrew. This will also install the XCode utils if you don't have them already installed.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Git

brew install git

Install Node Version Manager

Use the install script to install nvm. To do this, run the following in terminal.

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

Add nvm to bash profile

To make use of the Node Version Manager through its nvm command, you need to add the following to your ~/.bash_profile file. Create a new file if it does not already exist.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

Install Node

Run nvm install node in terminal. Once installed, you should be able to run both node -v and npm -v to see their versions.

Install required node packages

In order to create (and use) Vue efficiently, we'll need some packages installed. You can use npm i -g [package] (or npm install --global) to install a package to be used globally by your system.

For Vue, we need the Vue CLI (for creating our Vue boilerplates) and eslint (for JS linting) from npm. To install these, run npm i -g vue-cli eslint in terminal.

Create a test Vue app

In terminal, create and navigate to your workspace directory, and run vue init webpack hello-vue to create a new project named hello-vue, using the webpack boilerplate. Step through the setup guide and edit any info as needed (or just press enter for testing).

Next, navigate into your project with cd hello-vue and install the project's local dependencies by running npm install (or npm i).

Run the app

You should now be able to run the app by executing the command npm run dev - navigate to its running address in your web browser and you should be greeted with the initial Vue app.

Thank you for the tutorial, this got me out of a right rut! 💯

thanks for writing this manual!

This is great. Am looking for a way to install @vue/cli using homebrew on mac. Any hints or tips. I'm getting permission issues. Amy trying again by uninstalling and starting from scratch.

Thanks for this, can you give me a lesson on how to install live-server on mac os too.

Thanks for this manual~ Translate a Chinese copy for this.

Vue 在 macOS 下的环境配置

安装 macOS :P

安装 Homebrew

打开终端并运行以下命令以安装最新版本的Homebrew。
这还会顺便给你安装 XCode utils，如果你之前没装过的话。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 Git

brew install git

安装 NVM(Node Version Manager)

请在终端中运行以下命令，以使用安装脚本来安装nvm。

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

将 nvm 添加到 bash 配置文件

想要在命令行中通过 nvm 指令来使用 NVM，你需要将以下内容添加到您的 ~/.bash_profile 文件中。如果你使用 ZShell 的话，是 ~/.zshrc 文件。另外，你可以检查一下，安装脚本也可能已经帮你添加好了以下脚本内容。
如果尚不存在，请创建一个新文件。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

安装 Node

在终端中运行nvm install node。安装后，您应该能够运行node -v和npm -v来分别查看它们的版本。

安装所需的 Node 依赖包(packages)

为了高效地创建（和使用）Vue，我们需要安装一些依赖包(packages)。您可以使用npm i -g [package]
(或 npm install --global)来安装由系统全局使用的依赖包(packages)。

就 Vue 而言，我们需要npm中的Vue CLI（用于创建Vue模版）和eslint（用于JS linting）。要安装这些，
请在终端中执行npm i -g vue-cli eslint。

创建一个 Vue 测试应用

在终端中，创建并进入你的工作目录，然后运行 vue init webpack hello-vue 创建一个名为
hello-vue新工程，这里用到了 webpack 模版。跟着设置指南并根据需要逐步编辑信息（或就一直
按回车Enter来测试一下）。

接下来，执行cd hello-vue进入到你的项目，然后执行npm install (或 npm i)来安装项目的本地依赖。

运行应用

现在，你应该可以通过执行命令 npm run dev 来运行这个应用程序 - 在浏览器中输入地址，然后你应该会
能看到 Vue 初始应用的欢迎界面。

Doesn't work in 2021