由于本人使用的是mac系统,因此在vue.js 的环境搭建上遇到许许多多的坑。感谢 showonne、yubang 技术指导,最终成功解决。下面是个人的搭建过程,权当是做个笔记吧。

由于mac非常人性化的将bash内置于终端中,因此可以直接在终端中使用bash命令。

第一步: Mac OS系统安装 brew

    打开终端运行以下命令:

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

第二步: 安装 node.js

    为了避免使用brew命令经常出错的情况,所以采用手动安装  

    下载地址:https://nodejs.org/en/download/     (选择mac os)

  第三步: 获取nodejs模块安装目录访问权限  (必须步骤)

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

第四步: 安装 淘宝镜像 (cnpm)    

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

第五步:安装webpack

  1.    cnpm install webpack -g

  第六步:安装vue脚手架

  1.     npm install vue-cli -g (npm下载速度超级慢,目前cnpm已经成功替代npm)
  1.    sudo cnpm install -g vue-cli
  1.  

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

  1.     cd 目录路径
  1.  

  第八步:创建一个vue.js工程

  1.     vue init webpack(使用哪个模板?不懂可以百度一下) 工程名字<工程名字不能用中文>
  2.  

  第九步:安装项目依赖

    一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

  1.     npm install  (慎用,会非常慢)
  1.     cnpm install   

  第十步:安装 vue 路由模块vue-router和网络请求模块vue-resource

  1.     cnpm install vue-router vue-resource --save

  启动项目

  1.     npm run dev

  1.   总结:新手上路,一大堆的错误正在慢慢解决,目前成功入坑 vue.js 感兴趣的朋友可以一起学习交流下。
  1.  

mac如何运行vue项目的更多相关文章

  1. 如何在mac上运行vue项目

    使用终端安装Vue运行环境 1.安装 Homebrew Homebrew 是osx下面最优秀的包管理工具,没有之一.先在终端查看是否已安装brew brew -v 如果返回 Homebrew 的版本号 ...

  2. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  3. 零基础 Vue 开发环境搭建 打开运行Vue项目

    [相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...

  4. 解决运行vue项目的报错This relative module was not found:

    运行vue项目出现这样的报错. This relative module was not found: * ../../assets/img/spot.png !./src/components/on ...

  5. 在运行vue项目时,执行npm install报错小记

    在运行vue项目时,执行npm install 报错,导致后续的执行报各种错误,根据报错,尝试了网上的各种办法,最后发现时网络问题下载失败导致,解决办法: 安装cnpm==>npm instal ...

  6. 不用终端运行 Vue项目 基于Pycharm

    不用终端运行 Vue项目 基于Pycharm 如下图展示 接下来 然后单击右上角运行 即可完成运行

  7. 如何运行vue项目

    首先,列出来我们需要的东西:   node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm  npm的淘宝镜像   安装node.js 从node.js官网下载并安装node,安 ...

  8. mac上安装vue项目

    mac上如何安装vue项目 一, mac系统安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H ...

  9. 如何使用Vue-cli搭建和运行vue项目

    此文章  主要参考:https://jingyan.baidu.com/article/5225f26bbb430fe6fa0908ce.html 在vue init webpack my-proje ...

随机推荐

  1. bzoj 1588 平衡树 splay

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 15446  Solved: 6076[Submit][Sta ...

  2. 手机 safari mac 调试

    1.下载 safari technology preview 2.iphone 设置: 打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器” 3.mac 上打开 safar ...

  3. 基于OpenResty和Node.js的微服务架构实践

    什么是微服务? 传统的单体服务架构是单独服务包,共享代码与数据,开发成本较高,可维护性.伸缩性较差,技术转型.跨语言配合相对困难.而微服务架构强调一个服务负责一项业务,服务可以单独部署,独立进行技术选 ...

  4. mysql 如何解决字段不区分大小写的问题

    当我们输入不管大小写都能查询到数据,例如:输入 aaa 或者aaA ,AAA都能查询同样的结果,说明查询条件对大小写不敏感. 解决方案一: 于是怀疑Mysql的问题.做个实验:直接使用客户端用sql查 ...

  5. 「Linux+Django」uwsgi服务启动(start)停止(stop)重新装载(reload)

    转自:http://blog.51cto.com/12482328/2087535?cid=702003 1. 添加uwsgi相关文件 在之前的文章跟讲到过centos中搭建nginx+uwsgi+f ...

  6. git安装和简单配置

    http://pan.baidu.com/share/link?shareid=4291215660&uk=219947478 直接贴网盘的地址了

  7. King's Sanctuary(简单几何)

    King's Sanctuary Time Limit: 1000 ms Memory Limit: 65535 kB Solved: 111 Tried: 840 Submit Status Bes ...

  8. HDU 2593 Pirates’ Code (STL容器)

    题目链接 Problem Description Davy Jones has captured another ship and is smiling contently under the sun ...

  9. nesC编程入门

    1.接口 NesC程序主要由各式组件(component)构成,组件和组件之间通过特定的接口(interface)互相沟通.一个接口内声明了提供相关服务的方法(C语言函数).例如数据读取接口(Read ...

  10. 使用maven打包项目遇到错误: http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException

    今天在使用maven打包项目时遇到一个错误: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin ...