Mac 创建Vue项目 & 权限 超详细!!配图讲解!!

1.创建Vue项目

需知:需要安装npm和Vue脚手架 可以查看作者主页专门出了一期安装!!
在桌面新建一个文件

这样我们创建的Vue项目就会在这个文件夹里
进入终端后输入
vue create stun(项目名首字母不能大写) 

sudo vue create stun(项目名首字母不能大写) 
1.选择配置项
会车后我们会见到

Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) ——>vue3配置项
  Default ([Vue 2] babel, eslint) ——>vue2配置项
❯ Manually select features ——>手动选择配置项(推荐)

选择配置项是通过键盘上下键来进行选择的 选择后直接会车即可
2.选择当前项目所需要的功能

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to 
toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

通过键盘上下进行选择 找到自己想要的功能直接按空格即可 当选完后按回车
3. 选择Vue.js的版本
 

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS 
Pre-processors
? Choose a version of Vue.js that you want to start the project with 
  3.x 
❯ 2.x 

通过向下键选择直接所需要的Vue.js版本 现在目前推荐选择2.x版本 选择后直接会车可进下一步
4.配置项

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS 
Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated 
config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn

无脑按回车即可 其中如有自己需要选择的配置项可以进行选择
5.创建完成

 后面按照上面给的打开方式 输入打开即可 我这里是yarn打开 有的小伙伴可能是 npm 也是可以的
打开后就会出现两个服务器网址 大家直接复制粘贴到浏览器中查看即可

 

 这样我们的一个Vue项目就创建完成了
打开可以再次查看桌面里的文件就会有Vue项目
拖拽到Visual Studio Code即可 

如果出现删除更改不了文件说明权限不足 解决方案: 

 

打开锁点击应用到包含的项目即可
因为Mac有些终端操作可能权限不足 所以在操作的时候在命令前加上 sudo .... 输入密码即可
如有其他问题欢迎戳戳!!! 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值