Vue Cli3安装配置步骤

一、准备工作：

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

1. 安装node.js(自带了软件包管理工具npm)
2. 安装webpack，命令：

 sudo npm install webpack -g //-g表示全局安装

3. 安装vue cli3的脚手架构建工具，命令：

sudo npm install -g @vue/cli //vue cli3的包名称由vue-cli改成了@vue/cli

4. 测试有没有安装成功（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源的连接速度，询问你是否切换至淘宝镜像

2. 配置

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

? 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