Vue2学习——Vue CLI

在学习vue2过程中，当我们需要快速搭建一个项目工程时，vue官方就为我们提供了Vue CLI（Vue Command Line Interface）的脚手架。

概述

官网
Vue CLI是一个用于快速开发Vue.js的完整系统，提供：
通过@vue/cli建立交互式项目脚手架。
运行时依赖关系（@vue/cli-service）即：
可升级；
构建在webpack之上，具有合理的默认值;
可通过项目内配置文件进行配置；
可通过插件扩展
官方插件的丰富集合，集成了前端生态系统中最好的工具。
一个完整的图形用户界面，用于创建和管理Vue.js项目。
Vue CLI旨在成为Vue生态系统的标准工具基线。它确保各种构建工具与合理的默认值一起顺利工作，因此您可以专注于编写应用程序，而不是花费数天时间与配置争论。同时，它仍然提供了灵活性，可以调整每个工具的配置，而不需要弹出。

安装

查看当前设备是否已经成功安装Vue CLI工具
打开终端，输入vue -V，（-V需要大写）

出现@vue/cli 表示已经安装成功，后面表示已安装的版本号
若没有相关显示，则进行安装。
VUE CLI有低版本和高版本，这取决于你安装的NODE.JS环境版本（若高版本安装失败可以尝试低版本进行安装）
使用npm命令进行全局安装（方便使用）

• 低版本：npm install -g vue-cli
• 高版本：npm install -g @vue/cli

创建

打开终端，进入你需要存放生成项目的路径

执行创建过程命令，vue create 项目名称，按下回车，出现以下结果：

这里需要我们配置要创建的过程项目的预设：

• [Vue x] 表示使用Vue2或者Vue3的语法进行开发
• babel 能够将es6转换成es5
• eslint 语法检查工具
  最后一个选择是自定义选择配置的意思，这里我们通过方向键选择**默认[Vue 2]**的配置，然后按下回车
  
  等待工程创建
  
  工程创建成功
  

运行

根据以上提示，进入项目所在目录，并执行启动命令npm run serve

出现以上内容表示启动成功，我们打开浏览器输入访问路径：

注意

创建工程时，工程名称不能包含大写字母，否则出现报错告警

Warning: name can no longer contain capital letters.报错翻译：名称不再支持包含大写字母。

至此，使用Vue CLI脚手架创建vue工程全部结束，完结撒花！