mac上vue开发环境搭建

mac上搭建vue开发环境:

在网上找了很多资料,顺序和成功率都不是很适合mac本地环境搭建,这边通过自己成功搭建完毕,特此罗列下教程,一回生二回熟,多创建几遍,自然就会熟能生巧;

具体好些参考了cnBlogs上“成长中的小牛”的博客操作步骤,特此感谢:https://www.cnblogs.com/pengjunhao/p/6798496.html

1、首先去nodejs官网下载node.js安装包;

https://nodejs.org/en/download/

点击,下一步,选择安装;

2、第二步:

nodejs包,包含npm安装命令,第二步,修改淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、第三步:

安装vue脚手架,vue-cli

sudo cnpm install -g vue-cli

4、第四步:

Mac OS系统安装 brew:

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

5、第五步:

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

sudo chmod -R 777 /usr/local/lib/node_modules/

6、第六步:

安装webpack

cnpm install webpack -g

7、第七步:

创建一个vue工程:

创建方式有两种,一种是通过命令创建:

vue init webpack(使用哪个模板?不懂可以百度一下) 工程名字<工程名字不能用中文>

第二种是通过ide编辑器创建,由于本人比较懒惰,使用了webstorm编辑器,webstorm是一款神级编辑器;

下载地址:https://www.jetbrains.com/webstorm/?fromMenu

这里强添一波webstorm,确实非常好用,对于Android开发的我来说,很容易上手;不过逼格搞得可以自行选择sublime;

创建完成,具体目录截图如下:

 

8、最后一步,打开terminal终端,定位到创建的项目目录:

执行命令:

cnpm install

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

cnpm install vue-router vue-resource --save

启动项目:

npm vue rundev

在浏览器中输入:http://localhost:8080 就能看到新创建的vue项目运行结果;

 

猜你喜欢

转载自blog.csdn.net/u011498329/article/details/85012426