vue2 vue-cli4.41项目创建步骤

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI ：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包（如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）

二、安装

1. 全局安装过旧版本的 `vue-cli`(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

操作如下：

可以看到卸载成功后，vue命令不存在了

2. Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。

（1）查看node 版本

（2）下载安装nodeJs很简单（和其他系统软件一样根据需求按步骤安装）这里不做介绍，中文官方下载地址：http://nodejs.cn/download/

安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

cnpm install -g @vue/cli  //yarn global add @vue/cli

操作如下图：

查看版本：

vue -V //vue --version

结果如下图：

三、使用

1.vue create 搭建新项目

（1）新建项目：

*官方提示：如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 winpty vue.cmd create hello-world 启动这个命令

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

具体操作如下：

首先，会提示你选择一个preset（预设）：
手动配置，根据你需要用方向上下键选择（按 “空格键”选择/取消选择，A键全选/取消全选，I键进行反选）对应功能

简介：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript                                 // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
( ) Progressive Web App (PWA) Support          // 渐进式Web应用程序 
( )Router                                     // vue-router（vue路由）
( ) Vuex                                       // vuex（vue的状态管理模式）
( ) CSS Pre-processors                         // CSS 预处理器（如：less、sass） 
( ) Linter / Formatter                         // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing                               // 单元测试（unit tests） 
( ) E2E Testing                                // e2e（end to end） 测试

选中自己所需的插件后，回车等待创建完成