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. getline()函数详解 (2013-03-26 17:19:58)

     学习C++的同学可能都会遇到一个getline()函数,譬如在C++premer中,标准string类型第二小节就是“用getline读取整行文本”.书上给的程序如下: int main() {   ...

  2. Android退出应用最优雅的方式(改进版)

    Android退出应用最优雅的方式(改进版)(转) 我们先来看看几种常见的退出方法(不优雅的方式) 一.容器式 建立一个全局容器,把所有的Activity存储起来,退出时循环遍历finish所有Act ...

  3. vue-mixins使用注意事项和高级用法

    因为在项目中 mixins(混合)特性使用频率是很高的 有必要熟练掌握官方文档: mixins 实际项目中 一般都存在 列表(list) 这种很常见的使用场景 话再多都不如上demo file: mi ...

  4. php 代码中的箭头“ ->”与“=>”是什么意思?

    类是一个复杂数据类型,这个类型的数据主要有属性.方法两种东西. 属性其实是一些变量,可以存放数据,存放的数据可以是整数.字符串,也可以是数组,甚至是类. 方法实际上是一些函数,用来完成某些功能. 引用 ...

  5. L101

    It isn't where you came from. It's where you're going that counts.起点并不重要,重要的是,你要去往何方.Nothing is impo ...

  6. CTreeCtrl控件

    一.HTREEITEM HTREEITEM是树中节点的句柄,也就是一个DWORD值.在树中唯一标识一个节点.它的值对于程序员其实没有什么意义,只是可以通过它找到一个节点,从而取得节点的属性,如 Get ...

  7. type_traits.h

    type_traits.h // Filename: type_traits.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: ht ...

  8. 【leetcode刷题笔记】Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. 继续学习C:数字进制表示

    1. 数字后面跟D表示十进制,如:123D. 2. 数字后面跟B表示二进制,如:10010B. 3. 数字后面跟Q表示八进制,如:652Q. 4. 数字后面跟H表示十六进制,如:2B5H. 把十进制数 ...

  10. POJ2774Long Long Message (后缀数组&后缀自动机)

    问题: The little cat is majoring in physics in the capital of Byterland. A piece of sad news comes to ...