mac中IDEA开发vue的环境搭建

1.安装插件

打开idea,首页选择configure -> plugins
mac中IDEA开发vue的环境搭建_第1张图片

2.搭建node.js环境

http://nodejs.cn/download/下载对应版本,无脑下一步即可完成安装。

打开终端,千万注意要以管理员身份运行!输入sudo - i
输入本机密码
然后输入 node -v
如果正确显示版本号,安装完成

3.使用淘宝NPM镜像

管理员下,终端输入 sudo npm install -g cnpm –registry=http://registry.npm.taobao.org
永久更改使用指定淘宝镜像 npm config set registry https://registry.npm.taobao.org
查看镜像源 npm config get registry
输入 cnpm -v 即可查看对应版本号

4.安装vue脚手架构建工具

命令行输入 npm install -g @vue/cli,可以输入vue --version或vue -V查看脚手架版本。

5.创建新项目

如下图所示,在JavaScript下找到vue.js,创建一个vue项目mac中IDEA开发vue的环境搭建_第2张图片
mac中IDEA开发vue的环境搭建_第3张图片
刚打开此处会加载一段时间
mac中IDEA开发vue的环境搭建_第4张图片
mac中IDEA开发vue的环境搭建_第5张图片
点击绿色三角运行,在浏览器输入http://localhost:8080/ 显示如下页面说明运行成功。
mac中IDEA开发vue的环境搭建_第6张图片

6.安装项目依赖

在idea里找到Terminal,输入cnpm install。
mac中IDEA开发vue的环境搭建_第7张图片

7.引入vue.js

mac中IDEA开发vue的环境搭建_第8张图片
mac中IDEA开发vue的环境搭建_第9张图片
mac中IDEA开发vue的环境搭建_第10张图片
之后运行会出现两个错误
在这里插入图片描述
第一个只需要在chrom中添加扩展程序即可解决,将扩展程序直接拖入。

第二个只需要将productionTip设置为false即可解决。
mac中IDEA开发vue的环境搭建_第11张图片
此时环境搭建完成!!!!

你可能感兴趣的:(macos,intellij-idea,vue.js)