文档章节

Vue.js开发环境搭建说明(mac)

Danni3
 Danni3
发布于 04/21 10:12
字数 848
阅读 14
收藏 0

vue开发环境搭建(mac)

投影放大:cmd + +

安装Node

下载Node

官网下载 https://nodejs.org/en/download/

安装Node

双击安装包,选择安装目录,比如: /usr/local/bin

安装成功后最好记录一下安装目录

•	Node.js v10.13.0 to /usr/local/bin/node
•	npm v6.4.1 to /usr/local/bin/npm

测试Node安装

测试是否安装成功。 打开终端,输入node,出现>交互命令行,然后可以输入console.log("Hello,World");测试安装。 返回​Hello,World和undefined表示成功。

> console.log("Hello,World");
Hello,World
undefined

输入.exit退出node,查看node和npm的版本。

node -v
npm -v

设置npm的默认安装路径和缓存路径

# 查看用户配置
npm config ls
npm config list
# 查看全部配置
npm config ls -l 
npm config list -l

默认npm包安装目录为prefix = "/usr/local",因为安装时有可能出现权限不够无法安装。

  1. 修改npm安装程序时的默认位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"

  2. 设置npm安装程序时的缓存位置 ​npm config set cache "/xxx/xx" 缓存的默认位置为cache = "/Users/danni/.npm",在用户下,不存在权限问题,因此也可以不修改。

  3. 然后在把"/Users/danni/.nodejs"路径添加到环境变量PATH中

cd
vi .bash_profile
export NODE_HOME="/Users/danni/.nodejs"
export PATH=":$NODE_HOME/bin:$CNPM_HOME/bin:$M2_HOME/bin:$PATH"

安装cnpm

默认的npm包下载地址为registry = "registry https://registry.npmjs.org",在国外,速度较慢,可以用阿里定制的cnpm命令行工具代替默认的npm。

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
# 修改配置为cnpm
npm config set registry http://registry.cnpmjs.org
# 复原
#npm config set registry https://registry.npmjs.org

可查看配置是否已修改npm config ls

用户的配置会保存在/Users/danni/.npmrc文件中

安装vue-cli

安装vue和vuex

cnpm install vue
cnpm install vuex

安装vue-cli脚手架

cnpm install vue-cli -g

配置环境变量

刚才已配置export NODE_HOME="/Users/danni/.nodejs",确认/Users/danni/.nodejs/bin下有vue等执行文件即可。

DannideMacBook-Pro:bin danni$ ls
cnpm		vue		vue-init	vue-list

查看版本

vue -V

注意:V为大写;此为vue-cli版本,非vue版本。

安装IDE(如:VSCode or WebStorm)

官网下载

注:webstorm没有社区版,需购买,目前如个人有开源软件,可向JetBrains申请一年的License,一年后再续期。

导入工程项目

把vue_web项目导入IDE

打开VSCode/webstorm,File - Open打开即可。

安装项目

在项目所在目录下执行命令,生成node_modules目录。

cnpm install

运行项目

方法一:

  • 在项目所在目录下执行命令。
  • cnpm run dev
  • 控制台输出访问地址,比如:http://localhost:8081

方法二:

  • webstorm中配置Run - Edit Configurations - Add new configuration
  • 选择npm,package-.json选择项目中的package.json,script填写dev
  • 然后点击Run

访问测试

打包项目

npm run build

打包后生成dist目录。

注意:提交代码时,不要上传node-modules、dist文件夹目录下的内容

常用包安装

可先安装,防止后续使用时缺少。如:

  • 单元测试mocha:cnpm install -g mocha
  • express框架:cnpm install -g express
  • 等等

© 著作权归作者所有

Danni3

Danni3

粉丝 4
博文 176
码字总数 57872
作品 0
广州
私信 提问
Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样 开发环境: Homebrew ( Mac的包管理神器 ) → Node.js→ cnpm(淘宝镜像,节省安装时间)→ we...

一墨编程学习
2018/07/11
0
0
Vue中路由管理器Vue Router使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 创建过程比较慢,需...

tianma3798
2018/10/17
0
0
十分钟上手-搭建vue开发环境(新手教程)

想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记...

祈澈姑娘
2018/05/28
0
0
VSCode 搭建Vue开发环境之Vue CLI

一、简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式前端框架,不仅易于上手,还便于与第三方库或既有项目整合。 3.关于Vue是使用方...

tianma3798
2018/09/26
0
0
webpack4手动搭建Vue开发环境实现todoList项目

前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己...

茉莉灬纯洁的白
05/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
0
0
17.windows上安装kafka并简单应用

1.单机版 1.1 安装jdk 略 1.2 安装zookeeper https://my.oschina.net/springMVCAndspring/blog/3045210 1.3 安装window上安装kafka 1.3.1 下载 http://kafka.apache.org/downloads 1.3.2 解压......

20190513
昨天
1
0
缓存雪崩

缓存雪崩原因:大批次的缓存数据,同一时刻过期 解决方案: 1、尽可能避免所有缓存在同一时刻过期,即:合理调整过期策略 2、对条件加锁 伪代码: public ProductselectProduct(String id){ ...

少年已不再年少
昨天
9
0
所以说这才是Redis进化史吗?看Redis是如何变成最强缓存的

写在前面:笔者翻阅了很多资料,只能找到Redis2.2及以后的主要版本的发布日志。所以,让我们从2.2开始一步一步深入了解Redis。 2.2 redis-cli命令非常大的改进: Tab补全,支持help(例如help ...

Java干货分享
昨天
14
0
manjaro抽风,/usr/lib/modules目录丢失

现象 2019年6月16日这周,突然发现manjaro抽风: 先是启动时无法加载一些内核模块,导致启动失败 然后用启动盘重新pacman -S linux,第一次启动是好的,再启动就有问题了 原因 翻来覆去搞不定...

chuqq
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部