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项目运行结果;