ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue脚手架安装及项目搭建(mac版)

2021-06-06 11:29:22  阅读:180  来源: 互联网

标签:npm Vue image mac vue 脚手架 权限 安装 png


前提:电脑上已经安装好了npm

vue脚手架全局安装终端命令

$ sudo npm install -g vue-cli

安装完成之后检测

$ vue -V

如果终端输出vue的版本号,那么脚手架就安装成功了,但输入vue-V还有另外一种情况,如下图:屏幕快照 2021-06-06 上午10.44.37

这时就需要用到另外一个指令 vue --version 成功之后,如下图:

屏幕快照 2021-06-06 上午10.47.11

出现版本号,就证明cli以安装完毕

项目搭建

  1. 在项目的父级目录下进入终端,此目录任意(在新建的目录下)

 

image.png

  1. 安装项目(在当前的目录下)

终端命令

$ vue init webpack pproject-web

这里的pproject-web是自定义的vue的项目名称,该名称不限制,可以任意。至于vue项目的其他依赖模块,我们根据项目需求单独安装

注意!这里可能出现配置不成功的可能,如下图:

 

image.png

出现这种情况需要就是权限问题,需要在指令前加sudo,之后输入电脑设置的密码即可,成功后如下图:

 

 

image.png

 

输入项目名,之后一路回车至vue-router,如需要可选y,如不需要直接n+回车。

 

image.png

如若下载速度实在太慢,可切换为cnpm下载 输入指令 npm config set registry https://registry.npm.taobao.org

之后开始进行自动配置安装,待安装完成之后,打开项目文件夹,出现以下文件,证明安装成功:

 

 

image.png

成功之后cd进入项目文件夹,首先下载依赖,npm install , 之后 npm run build ,主要如遇权限问题,加sudo,跑起来成功后会进入以下页面:

 

 

image.png

 

到这里之后,恭喜你,你已经成功的使用vue-cli搭建了一个完整的vue项目。

补充一条,部分想伙伴解除mac系统的时间不长,可能会对权限问题不适应,mac的权限问题,确实比较麻烦,比如说咱刚建好的项目,一般的权限都是只读,不可写入,这是该该怎么办呢,输入指令sudo chmod -R 777 "你需要读写的项目名",赋予权限即可。如果觉得麻烦可以费些时间,将mac电脑上的所有文件都赋予权限,输入一下指令sudo chmod -R 777 outcaster/ 即可,觉得有用假的加关注哦亲亲。

标签:npm,Vue,image,mac,vue,脚手架,权限,安装,png
来源: https://blog.csdn.net/weixin_50523140/article/details/117621066

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有