Vue脚手架安装及项目搭建（mac版)
前提：电脑上已经安装好了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以安装完毕
项目搭建
- 在项目的父级目录下进入终端，此目录任意（在新建的目录下）
image.png
- 安装项目（在当前的目录下）
终端命令
$ 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/ 即可，觉得有用假的加关注哦亲亲。
Vue脚手架安装及项目搭建（mac版)相关推荐
- vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- Vue脚手架安装 与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功 项目文件作用介绍 快捷安装项目所需依赖 命令 npm i Vu ...
- Vue.js 安装及其环境搭建,webpack-simple支持热更新
1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网:https://nodejs.org/en/ 2.安装git Git的官网:https://git-scm. ...
- vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- Node.js+Express+Vue+MySQL+axios的项目搭建
1 基本搭建 创建vue项目之前需要先安装Node.js和MySQL数据库 1.1 vue脚手架安装 npm i vue -g npm i @vue/cli -g//初始化vue项目 vue crea ...
- 7004.vue脚手架快速生成项目
文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...
- vue+node.js+mysql项目搭建
前言 用vue搭建前端页面.用node开发后端接口.数据库用mysql 可行性分析 缺点: nodejs单线程,不能做cpu密集型操作,导致时间片不能释放,阻塞后面的任务. nodejs可靠性比较低, ...
- Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
- vue脚手架安装时出现Error EPERM operation not permitted这个错误
vue脚手架安装时出现Error: EPERM: operation not permitted这个错误 **原因:**出现这个错误是因为安装全局模块时没有管理员权限,需要以管理员身份运行命令提示符窗 ...
最新文章
- 使用Netty如何做到单机秒级接收35万个对象
- MECARD格式的电子名片简单介绍
- 碰撞检测算法：点和矩形碰撞、点和圆形碰撞、矩形碰撞、圆形碰撞
- 实战派：一次kafka卡顿事故排查过程！
- 【模型解读】深度学习网络只能有一个输入吗
- 深入探究函数返回局部变量
- Opportunity Sales org F4 value help data source
- 课下作业：评估输入法（搜狗）
- 【Python3网络爬虫开发实战】1.6.2-Tornado的安装
- echart itemStyle属性设置
- Python NumPy教程
- 手机兼职做任务发布悬赏赚钱的APP汇总到底有多少？
- 实验二基于matlab的离散系统时域分析,离散时间系统的时域分析实验报告
- Python PIL Image的使用
- 上半年要写的博客文章27
- 9个有趣的心理学现象
- 中国计算机学会推荐中文科技期刊目录（2022年）
- uniapp微信头像
- 机器学习_吴恩达-总
- typora中输入数学公式