Mac安装vue

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

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

配置brew环境变量

Taojie:~ apple$ open .bash_profile
Taojie:~ apple$ source .bash_profile

添加brew路径如下:

装成功后,查看一下brew的版本信息:

Taojie:~ apple$ brew -v
Homebrew 2.1.
Homebrew/homebrew-core (git revision 5c8b; last commit --)
Taojie:~ apple$

二、安装node.js

在终端中运行以下命令:

Taojie:~ apple$ brew install nodejs

安装成功后,查看一下node.js的版本信息:

Taojie:~ apple$ node -v
v12.4.0
Taojie:~ apple$

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

Taojie:~ apple$ sudo chmod -R  /usr/local/lib/node_modules/
Password:
Taojie:~ apple$

4、安装 淘宝镜像 (npm)

Taojie:~ apple$ npm install -g cnpm --registry=https://registry.npm.taobao.org

5、安装webpack

Taojie:~ apple$ cnpm install webpack -g

6、安装vue脚手架

Taojie:~ apple$ cnpm install vue-cli -g

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

Taojie:~ apple$ cd /TJT/vue
Taojie:vue apple$ ls
Taojie:vue apple$

8、根据模板创建项目

Taojie:vue apple$ vue init webpack-simple vue1
会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字


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

Taojie:vue apple$ cd vue1
Taojie:vue1 apple$
注意:最后三步都是要进入到当前工程目录后执行的。

9、安装项目依赖

Taojie:vue1 apple$ cnpm install

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

Taojie:vue1 apple$ cnpm install vue-router vue-resource --save

11、启动项目

Taojie:vue1 apple$ npm run dev

安装OK后,访问http://localhost:8080如下:

 三、在webStorm中启动vue项目:

1、Run In Terminal

2、在终端输入启动命令 npm run dev

Taojie:src apple$ npm run dev

> vue1@1.0.0 dev /TJT/vue/vue1
> cross-env NODE_ENV=development webpack-dev-server --open --hot Project is running at http://localhost:8081/
webpack output is served from /dist/
404s will fallback to /index.html
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

Windows下安装vue:

https://www.cnblogs.com/liluxiang/p/9592003.html  他山之玉可以攻石

Mac安装vue的更多相关文章

  1. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  2. MAC安装vue.js

    一.下载node node下载地址:https://nodejs.org/en/download/ 下载后点击安装即可. node -v 检查安装是否成功 二.安装 淘宝镜像 (npm) npm in ...

  3. mac安装vue没有使用权限不足

    ➜  ~ vue init webpack frontend ⠋ downloading template /usr/local/lib/node_modules/vue-cli/node_modul ...

  4. Mac安装vue产生错误

    npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/webpack/node_modules/_ ...

  5. mac安装vue-devtools

    mac安装vue devtools 1.到github下载vue tool 的压缩包 正常的方法:git clone https://github.com/vuejs/vue-devtools 但事实 ...

  6. mac上安装vue项目

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

  7. Mac OS X下安装Vue脚手架(vue-cli)

    前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue ...

  8. Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法

    S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...

  9. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

随机推荐

  1. django admin后台显示H5颜色选项卡

    一般使用django后台,特别是有颜色的字段的时候避免手动输入一大推的颜色,可以使用h5颜色选项卡,这样用户就直接可以通过选项卡来选择自己所需的颜色.这个时候可以通过后台admin form来进行定制 ...

  2. AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

    就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...

  3. Logiscope学习网址

    Logiscope测试机理   http://blog.csdn.net/cmy673986/article/details/9163247 http://www.cnitblog.com/qiuya ...

  4. BEC listen and translation exercise 42

    These were built for the workers towards the end of the eighteenth century, and they are still furni ...

  5. 截取URL参数的方法

    1,有点小瑕疵,双问号会截取不到第一个参数 function GetQueryString(name){ var reg = new RegExp("(^|&)"+ nam ...

  6. 洛谷3384&bzoj1036树链剖分

    值得注意的是: 一个点的子树是存在一起的...也就是说我们修改子树的时候只用... /********************************************************* ...

  7. Java面试题10(如何取到set集合的第一个元素)

    1.如何取到set集合的第一个元素. public static void main(String[] args) { Set set = new HashSet(); set.add("x ...

  8. GridView有用的小方法--2017年2月13日

    原文:http://blog.csdn.net/21aspnet/article/category/285354更多:http://blog.csdn.net/21aspnet/article/cat ...

  9. ACM学习历程—FZU2148 Moon Game(计算几何)

    Moon Game Description Fat brother and Maze are playing a kind of special (hentai) game in the clearl ...

  10. [转]django 日志logging的配置以及处理

    http://davidbj.blog.51cto.com/4159484/1433741 日志在程序开发中是少不了的,通过日志我们可以分析到错误在什么地方,有什么异常.在生产环境下有很大的用途.在J ...