认知:

注:上面的图片转自Vue2.0 新手入门 — 从环境搭建到发布

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

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

2、安装node.js 
在终端中运行以下命令:

brew install nodejs

3、获取nodejs模块安装目录访问权限

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

4、安装 淘宝镜像 (npm)

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

5、安装webpack

cnpm install webpack -g

6、安装vue脚手架

npm install vue-cli -g

7、在硬盘上找一个文件夹放工程用的,在终端中进入该目录

8、根据模板创建项目

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

cd 命令进入创建的工程目录

9、安装项目依赖

npm install

10、安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

11、启动项目

npm run dev

Mac下搭建Vue开发环境的更多相关文章

  1. Mac 下搭建vue开发环境

    tips:一定要有翻墙工具如lanter,另外要保证网速OK. 1. 首先需要安装homebrew liukingdeMBP:~ liuking$ /usr/bin/ruby -e "$(c ...

  2. Mac下搭建php开发环境教程

    方案一:原生安装 这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X 内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.6.3为例,需要的朋友可以参考 ...

  3. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  4. mac 下搭建 Android 开发环境

    因工作需要,要在mac 下搭建 Android 开发环境.谷歌.度娘了好久,没有找个一个完整又系统的方法,很是苦恼.最终,皇天不负有心人,找到了下面这篇文档,结合亲身体验,特此记录.也为有这方面需求的 ...

  5. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  6. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  7. mac下搭建cordova开发环境

    Apache Cordova 原名叫PhoneGap.是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.PhoneGap最初由Nitobi开发,2011年 ...

  8. 在mac下搭建java开发环境

    刚刚从windows系统转到使用mac系统.感觉不是特别熟悉,须要一定的适应时间. 以下简介一下mac下搭建主要的java开发环境. 1.安装jdk 安装jdk1.7后,发现不须要进行环境变量配置,直 ...

  9. windows下搭建vue开发环境+IIS部署 [转]

    特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后 ...

随机推荐

  1. php 随笔 截取字符串 跳出循环 去除空格 修改上传文件大小限制

    substr(string,start,length) echo substr("Hello world",6); world 跳出循环 for($i=1; $i<5; $i ...

  2. STM32WB AHB总线、APB总线与外设

    方框图: 如图所示: 1)APB1外设 2)APB2外设 3)AHB1外设 4)AHB2外设 5)AHB3外设 6)AHB4外设(ABH共享总线外设) 内存映射关系图:

  3. 微信小程序开发(二)创建一个小程序页面

    为了方便讲解,我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留,其他全部删除(这两个文件存的是小程序的创建信息,删掉会有报错提示). 接下来我 ...

  4. 4.NIO_Channel 通道

    1.通道(Channel) 由 java.nio.channels 包定义的.Channel 表示 IO 源与目标打开的连接.Channel 类似于传统的“流”.只不过 Channel 本身不能直接访 ...

  5. Linux用户账号文件——passwd

    /etc/passwd文件是UNIX安全的关键文件之一.该文件用于用户登录时校验用户的登录名.加密的口令数据项.用户ID(UID).默认的用户组ID(GID).用户信息.用户主目录以及登录后使用的sh ...

  6. Cordova热更新和App升级

    web代码的更新此更新方式,只需要更新web前段代码,不需要更新android的原生代码.只是对js.html等的更新.1.添加插件 Cordova Hot Code Pushcordova plug ...

  7. pycharm图像不能显示,之前是可以显示的。显示一两次突然不显示了

    网上说是什么包问题的就说了.我遇到一个非常奇葩的问题 因为你的设置可能是这样 每次都在窗口右侧的工具栏那边显示.可能突然心情不佳就不显示了.然后你再把勾去掉即可.你要喜欢再点上也行.

  8. win10日历交互效果

    win10日历 早就想试着实现以下win10日历的动态css效果,现在终于有时间试试啦.本篇文章只是实现简单的效果,进阶篇后续会放上来 目标效果 鼠标移入目标元素,周围相关八块元素点亮,点亮高光范围呈 ...

  9. Java-DateUtils工具类

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  10. [Python之路] ORM(对象关系映射)

    一.概念 ORM是Python后端Web框架Django的核心思想,"Object Relational Mapping",即对象-关系映射,简称ORM. 一句话理解就是: 创建一 ...