mac安装vue脚手架_vue搭建和vue脚手架搭建区别

Vue (5) 2024-06-02 15:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说mac安装vue脚手架_vue搭建和vue脚手架搭建区别,希望能够帮助你!!!。

目录

一、安装node.js

二、安装vue-cli,创建项目

三、报错解决


一、安装node.js

1、node.js官网下载地址:https://nodejs.org/zh-cn/

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第1张

双击下载安装包

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第2张

点击继续即可
2、打开终端(顺便唠一句command+空格,输入ter,点击打开终端),输入node -V,查看版本、有版本号就是安装成功。 

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第3张

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第4张

3、node.js集成npm包管理器,npm -v查看版本

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第5张

这边因为我之前已安装,没有重新安装刚才截图的包。

 二、安装vue-cli,创建项目

1、终端输入npm install vue-cli -g
2、输入vue -V,查看版本

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第6张

 3、在终端打开一个文件夹,也就是存放vue-cli项目的地方,输入vue init webpack 项目文件夹名称,下图是初始化。

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第7张

等待下载完成即可。

当初刚开始搭建时候,遇到很多坑,最后解决了没有记录下了,现在回头也想不起来,后续想起来,再分享一下。

三、报错解决

分享一个报错解决方式,忘记是项目初始化还是npm安装插件时候出现的。

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第8张 这是由于.npm文件没有sudo权限
解决方案:
1、打开终端:进入/Users/zhangzy目录,输入ls -al ~/ grep .npm
2、查看.npm权限

mac安装vue脚手架_vue搭建和vue脚手架搭建区别_https://bianchenghao6.com/blog_Vue_第9张

3、输入sudo chown -R zhangzy /Users/zhangzy/.npm 获取权限

问题解决,这样就可以愉快的继续开发了。

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复