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

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

第一步: Mac OS系统安装 brew

    打开终端运行以下命令:

    /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)    

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

第五步:安装webpack

   cnpm install webpack -g

  第六步:安装vue脚手架

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

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

    cd 目录路径
 

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

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

  第九步:安装项目依赖

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

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

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

    cnpm install vue-router vue-resource --save

  启动项目

    npm run dev

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

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. shell unittest工具

    shUnit2:  https://github.com/kward/shunit2 用法非常简单,看看readme就行了.

  2. 前端PHP入门-014-参数的引用

    我们学习了变量的引用,我们来回顾一下知识: <?php $a = 10; $b = &$a; $a = 100; echo $a.'---------'.$b; ?> 而函数的参数 ...

  3. 在Centos系统下使用命令安装gnome图形界面程序

    第一步:先检查yum 是否安装了,以及网络是否有网络.如果这两者都没有,先解决网络,在解决yum的安装. 第二步:在命令行下 输入下面的命令来安装Gnome包. # yum groupinstall ...

  4. spring boot 2.0.3+spring cloud (Finchley)4、熔断器Hystrix

    在分布式系统中服务与服务之间的依赖错综复杂,一种不可避免的情况就是某些服务会出现故障,导致依赖于他们的其他服务出现远程调度的线程阻塞.某个服务的单个点的请求故障会导致用户的请求处于阻塞状态,最终的结果 ...

  5. 数学&动态规划:期望DP

    BZOJ3036 给定一张有向无环图,起点为1,终点为N,每个点i有ki条出边,从每个点走其中一条出边的概率是1/ki,求从1到N的期望步数 我们注意到一点,走每条边都是等概率的,那么就相当于 给定一 ...

  6. 第七周 ch04 课下测试补交

    2017-2018-1 20155335 <信息安全系统设计基础>第7周 课下测试博客 本人不慎忘记去交dao'zhi 测试题目: SEQ+对SEQ的改变有() A . PC的计算挪到取指 ...

  7. 微信小程序开发(四)线程架构和开发步骤

    线程架构 从前面的章节我们可以知道,.js文件是页面逻辑处理层.我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件.如在页面的onLoad时进行数据的下载,onShow ...

  8. layer弹窗的跳转功能

    1,本弹窗直接跳转父页面: @if(session('message')) <script> window.parent.location.reload(); //刷新父页面 var in ...

  9. How to reset XiaoMi bluetooth headphone Youth edition.

    To reset the speaker 1. Long press the phone call button to shut off the speaker 2. Connect the char ...

  10. win10环境变量

    jdk8 JAVA_HOME D:\devsoft\jdk\jdk1.8 CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar pa ...