Vue Cli3安装配置步骤

一、准备工作:

mac系统的前面加上sudo获取管理员权限

  1. 安装node.js(自带了软件包管理工具npm)
  2. 安装webpack,命令:
 sudo npm install webpack -g //-g表示全局安装
  1. 安装vue cli3的脚手架构建工具,命令:
sudo npm install -g @vue/cli //vue cli3的包名称由vue-cli改成了@vue/cli
  1. 测试有没有安装成功(node-v npm -v webpack -v vue -V)

二、搭建项目

  1. 创建cli3项目,命令:
vue create macmall
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

可以看到创建项目时会有个提示,会判断你对npm/yarn源的连接速度,询问你是否切换至淘宝镜像

  1. 配置

①选择一个配置(选择手动)

? Please pick a preset: (Use arrow keys)Default ([Vue 2] babel, eslint)                     //默认
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)     //默认
  Manually select features                            //手动选择特性

②自定义路线(选择第一个和第二个)

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Choose Vue version                   //选择vue版本,选3.x
 ◉ Babel        						//vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5
 ◯ TypeScript							//通过添加类型来扩展JavaScript;JavaScript的一个超集(添加了可选的静态类型和基于类的面向对象编程:类型批注和编译时类型检查、类、接口、模块、lambda 函数)
 ◯ Progressive Web App (PWA) Support	//渐进式Web应用程序(PWA)支持
 ◯ Router								//路由
 ◯ Vuex									//状态管理模式CSS Pre-processors					//CSS预处理器(如:less、sass)
 ◯ Linter / Formatter					//代码风格检查和格式化(如:ESlint)
 ◯ Unit Testing							//单元测试E2E Testing							//端到端(end-to-end)

③如何存放这些配置文件(选择独立的文件)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files			//放到单独的配置文件
  In package.json					//放package.json里

④是否保存本次配置(选择是)

? Save this as a preset for future projects? (y/N) 

⑤进入项目文件,启动项目

🎉  Successfully created project macmall.
👉  Get started with the following commands:
 $ cd macmall
 $ npm run serve
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值