Mac Vue搭建开发环境

165 阅读2分钟

Vue开发环境视频教程 密码: 3zfw


打开终端,安装brew

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

Homebrew中文安装官网

安装成功后,使用查看版本,验证是否安装成功

brew -v

输出:

Homebrew 2.1.11
Homebrew/homebrew-core (git revision 748b; last commit 2019-09-03)

安装node.js

brew install nodejs

也可以下载安装下载地址 

安装成功后,使用验证

node -v

给nodejs目录赋权限

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

检查是否安装了npm,一般安装 node 的时候会自动帮你安装了的

npm -v

如果检查没有输出版本好,则自己安装npm,如果输出了版本号则跳过 npm 的安装继续下一步。

brew install npm 

Mac-npm 安装与更新

安装成功后,使用验证

npm -v

安装 淘宝镜像 (npm),如果你网速好,可以不安装 cnpm,不安装则跳过这一行下面的 cnpm 换成 npm 就行,如果网速不好,推荐使用 cnpm,因为走的淘宝速度会比从国外拿东西快很多。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

开始Vue

创建一个基于 webpack 模板的新项目

如果不知道当前的 vue 是什么版本,运行:

vue -V

vue版本 >= 3.0 创建项目需要看这里 【vue-cli3.x 创建项目方式】,3.0版本以下的可以继续往下看。


然后 cd 到一个指定文件夹,根据当前的版本使用不同的创建命令,运行

// vue-cli < 3.0 
vue init webpack my-project

vue init webpack my-project 选项详解

这里需要进行一些配置,默认回车即可

创建完成之后,进入项目,安装并依次运行:

cd my-project

cnpm install

cnpm run dev

cnpm run dev 之后弹出下面这个页面就是成功了,现在你就可以用ide打开这个项目进行开发了

image.png

Vue的环境也就搭建完毕了!!!!

额外在提现一句,就是如果需要用到Git的可以自行安装,百度教程很多。检查是否安装Git

git --version

可以Git官网下载对应版本傻瓜式安装。