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/

3. 安装@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  //文件名 不支持驼峰（含大写字母）

具体操作如下：

1. 首先，会提示你选择一个preset（预设）：

   
   

2. 手动配置，根据你需要用方向上下键选择（按 “空格键”选择/取消选择，A键全选/取消全选，I键进行反选）对应功能

简介：

? Check the features needed for your project: (Press  to select,  to toggle all,  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） 测试

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

2. vue可视化搭建新项目

1. 进入vue ui图形化界面

vue ui

2. 然后会自动打浏览器页面，选择创建如下：

嗯哼，这样就创建完成了，还算简单吧，开始你的编写之路吧！！！