由于本人使用的是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. Centos7.3 安装 OpenCV3.3.0

    一开始会出现这个错误: CMake Error at CMakeLists.txt: (message): FATAL: In-source builds are not allowed. You s ...

  2. “玲珑杯”ACM比赛 Round #18 A 前缀预处理 D dp

    DESCRIPTION 今天HHHH 考完了期末考试,他在教学楼里闲逛,他看着教学楼里一间间的教室,于是开始思考: 如果从一个坐标为 (x1,y1,z1)(x1,y1,z1) 的教室走到(x2,y2, ...

  3. Codeforces Round #301 (Div. 2)A B C D 水 模拟 bfs 概率dp

    A. Combination Lock time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. find~~~查找文件

    find . -name "klibc" 在当前文件内查找文件 klibc find . -name "*libc*" 在当前文件内查找文件 (模糊查询)

  5. 替换换行符:回车换行CR/LF

    windows采用回车+换行CR/LF表示下一行,UNIX/Linux使用换行符LF表示下一行,MAC OS系统使用用回车符CR表示下一行. CR使用符号'\r'表示, ASCII码是13: LF使用 ...

  6. nginx 前后分离,地址重写,url匹配中遇到的问题

    我遇到的问题: 前端用vue的路由做页面路由,后台用spring mvc做数据接口,但是遇到路由地址和接口地址无法区分的问题,导致nginx无法正确准发比如: 1)http://127.0.0.1/i ...

  7. dva 笔记

    最简单的结构 // 创建应用 const app = dva(); // 注册 Model app.model({ namespace: 'count', state: 0, reducers: { ...

  8. linux下配置java环境及问题

    一:下载jdk 下载稳定版本http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7-downloads-1880260.html ...

  9. 响应式布局(Responsive Layout)/流式布局(Fluid Layout)/自适应布局(Adaptive)

    1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类. 2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式. ...

  10. 【CodeForces】626 F. Group Projects 动态规划

    [题目]F. Group Projects [题意]给定k和n个数字ai,要求分成若干集合使得每个集合内部极差的总和不超过k的方案数.n<=200,m<=1000,1<=ai< ...