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. openlayers 3加载GeoServer发布的wfs类型服务

    转:https://blog.csdn.net/u013323965/article/details/52449502 问题产生:      openlayer3加载WFS存在跨域问题,需要用json ...

  2. [深入学习C#]C#实现多线程的方法:线程(Thread类)和线程池(ThreadPool)

    简介 使用线程的主要原因:应用程序中一些操作需要消耗一定的时间,比如对文件.数据库.网络的访问等等,而我们不希望用户一直等待到操作结束,而是在此同时可以进行一些其他的操作.  这就可以使用线程来实现. ...

  3. 初次接触Servlet3.0

    Servlet3.0 一.要求 MyEclipes10.0或以上版本! 发布到Tomcat7.0或以上版本!二.步骤 创建JavaEE6.0应用 --------------------------- ...

  4. 【leetcode刷题笔记】Remove Nth Node From End of List

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  5. Ffmpeg转码研究一

    Ffmpeg是一款功能强大的视频处理工具,那么转码肯定不是问题的,因为项目的需求,对转码进行了研究.刚开始首先去看了ffmpeg源代码中的一个例子transcode.c,但是发现该例子更应该称之为re ...

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

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

  7. RTSP 协议分析 (一)

    RTSP 协议分析1.概述: RTSP(Real Time Streaming Protocol),实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学.网景和RealNetwor ...

  8. HDOJ(1018)

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. Python:itertools库的使用

    转于:https://blog.csdn.net/neweastsun/article/details/51965226 博主:neweastsun的专栏 介绍 itertools是python内置的 ...

  10. 1 ELK 简介

    日志主要包括系统日志.应用程序日志和安全日志,系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因.经常分析日志可以了解服务器的负荷,性能安全性,从而及时采取措施纠 ...