Vue前端项目搭建及运行（mac系统）

Vue前端项⽬搭建及运⾏（mac系统）
1、安装node和npm
若通过node -v和npm -v命令能顺利查看node和npm版本则说明安装成功。

2、安装vue-cli 3.x
mac⽤户采⽤如下命令安装vue官⽅脚⼿架vue-cli 3.x，若在命令前不加sudo，则会报错“errno -13”。

（windows⽤户可不加）
sudo npm install @vue/cli -g
注：其他博客上看到的“npm uninstall vue-cli -g”是⽤来安装3.0以下版本的vue-cli的。

若安装的是这种⽼版vue-cli，则需⽤“sudo npm uninstall vue-cli -g”卸载后，再⽤上⾯的命令安装vue-cli 3.x，否则后续步骤⽆法进⾏。

3、通过图形界⾯创建项⽬
vue ui
运⾏上述命令后，在浏览器中会⾃动启动⼀个本地服务。

创建过程中的具体操作可参考这两篇博⽂：
4、启动项⽬
4.1 终端启动
在终端进⼊项⽬⽂件夹，然后执⾏如下两种命令之⼀来启动项⽬
npm run serve 或者 npm run dev
若出现如下报错，则因为node版本为17+，在OpenSSL⽅⾯做了更新，与webpack不兼容。

4.2 IDEA内设置启动按钮
⽤IDEA打开vue项⽬，按照图⽰添加启动按钮。

（1）Add Configuration -》添加npm
（2）Scripts选择serve，表⽰按下绿⾊三⾓形图标时执⾏npm run serve
Scripts三个选项的意思：
(3)点击启动按钮，和终端效果⼀样即可。