Mac安装vue
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的更多相关文章
- Mac安装vue.js开发环境
Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...
- MAC安装vue.js
一.下载node node下载地址:https://nodejs.org/en/download/ 下载后点击安装即可. node -v 检查安装是否成功 二.安装 淘宝镜像 (npm) npm in ...
- mac安装vue没有使用权限不足
➜ ~ vue init webpack frontend ⠋ downloading template /usr/local/lib/node_modules/vue-cli/node_modul ...
- Mac安装vue产生错误
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/webpack/node_modules/_ ...
- mac安装vue-devtools
mac安装vue devtools 1.到github下载vue tool 的压缩包 正常的方法:git clone https://github.com/vuejs/vue-devtools 但事实 ...
- mac上安装vue项目
mac上如何安装vue项目 一, mac系统安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H ...
- Mac OS X下安装Vue脚手架(vue-cli)
前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue ...
- Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法
S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...
- 运行vue项目--安装vue脚手架vue cli
第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...
随机推荐
- Oracle学习笔记_05_分组函数
组函数:avg sum max min count group by having group by 增强:rollup cube grouping groupi ...
- php常用函数htmlspecialchars、strip_tags、addslashes解析
本文章向大家介绍php开发中经常使用到的字符串函数htmlspecialchars.strip_tags.addslashes的使用方法及他们之间的区别,需要的朋友可以参考一下. 1.函数strip_ ...
- VScode 为 *.cu文件 添加高亮及c++ intelligence相关操作的方法
问题:*.cu在VScode不能像*.cc或*.cpp一样在c++及c++ intelligence插件有关键字的高亮以及go to definition等的操作 解决方案:添加*.cu与*.cpp文 ...
- linux命令学习笔记(9):touch 命令
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. .命令格式: touch [选项]... 文件... .命令参数: -a 或--t ...
- JAVA标号与continue,break
可以给语句块加标号赋予它们名称,标号位于语句之前.标号只能被continue和break引用.格式如下: label:statement 语句前只允许加一个标号,标号后面不能跟大括号. ...
- 【LeetCode】066. Plus One
题目: Given a non-negative integer represented as a non-empty array of digits, plus one to the integer ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
- Oracle 12c 新特性之 数据库内归档(In-Database Archiving)
Oracle Database 12c中引入了 In-Database Archiving的新特性, 该特性允许用户通过对表上的数据行标记为inactive不活跃的,以归档数据. 这些inactive ...
- codeblocks如何支持_tmain?可移植代码的编码推荐
codeblocks默认源代码文件编码根据OS而定,编译时编码UTF-8. 在你不更改任何codeblocks配置时: 在WINDOWS中:源代码——WINDOW ...
- ObjectInputStream缓存数据
DataManager /** * 本地数据的存储 * @author Administrator * */ public class DataManager { private static fin ...