当前位置:   article > 正文

mac版搭建vue开发环境_mac电脑安装vue开发环境

mac电脑安装vue开发环境

记一次macbook搭建vue开发环境

步骤:(五步走)

  1. Homebrew   (mac系统下的包管理器)
  2. node.js           (javascript运行环境-runtime)
  3. npm             (nodejs下的管理器)
  4. webpack      (构建工具)
  5. vue-cli         (用于生成模板的vue工程)

开始准备工作:打开终端

1.安装brew 

打开终端运行以下命令:(复制下面的代码在终端,再回车)

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

注意事项: 有些可能是需要梯子(你懂的),没有梯子多试几次,还有网络不好的时候也会安装失败。如果还有安装过了,但是更新的时候因为各种原因更新失败了可能会导致不匹配问题,可以卸载重装,比如出现Checksum mismatch问题就是(下图)

上面我的路径看Archive项,然后卸载这里的文件就可以了

rm /Users/macbook/Library/Caches/Homebrew/portable-ruby-2.6.3.mavericks.bottle.tar.gz


安装成功后,查看一下brew的版本信息:(如果有提示版本号说明安装成功)

brew -v

 

2.安装node.js

在终端直接运行下面指令,然后等待安装

brew install nodejs

安装完成后输入下面指令检测看看是否安装成功:(有检测到版本号说明成功,直接下一步)

node -v

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

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

3.安装npm (淘宝镜像)

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

 4.安装webpack

npm install webpack -g

5.安装vue-cli

cnpm install vue-cli -g

到这里就搭建好了vue开发环境
下面创建一个vue工程
 先指定一个目录来存放你要创建到工程,然后cd到该目录
 

vue init webpack-simple 工程名字 //工程名字不能用中文

会有一些初始化的设置,如下输入: 
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理) 
Project name (vue-test)直接回车默认 
Project description (A Vue.js project) 直接回车默认 
Author 写你自己的名字

然后cd进入到你刚建到工程目录里

cd demo1 //假如你刚才建到工程叫demo1

注意:最后三步都是要进入到当前工程目录后执行的

安装项目依赖

npm install

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

cnpm install vue-router vue-resource --save

启动项目

npm run dev

然后就可以在浏览器打开输入http://localhost:8080打开该项目

想要关闭项目可以直接control+c,回车,y
想要打开已存在到工程项目,首先先cd到该项目目录下,然后再 npm run dev 可以了。如果有报错到可能是缺少什么依赖或者是该工程不完善(未知),本猿从搭建到这里都很顺畅,每遇见什么报错。


本猿是参与另一位博主到文档完成:https://blog.csdn.net/ytangdigl/article/details/75095787#commentBox

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/777453
推荐阅读
相关标签
  

闽ICP备14008679号