Vue-cli

首先要明确一件事情：Vue-CLI ≠ Vue，Vue-CLI就是一个Vue工具。

1、单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：

所有的组件都放同一个html文件中没有构建步骤,不能使用npm来管理项目缺乏语法高亮和提示没有针对单个组件的css样式支持

针对于上述的问题，vue框架发布了vue-cli项目生成工具，Vue-cli是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

2、工具安装

Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v10 以上)。

网址：http://npmjs.com

## 安装 npm install -g @vue/cli ## 安装成功后，检查 vue --version vue -V # Vue和VueCLI是两回事 ## 卸载 其实这个不经常使用的 npm uninstall -g @vue/cli

如果需要安装其他版本，可以使用npm install -g @vue/cli@版本号的方式进行指定版本。

如果最新版安装不成功，可以尝试以下3种方式去解决：

断网，使用热点共享流量去执行安装命令安装其他版本切换一下npm镜像源，切换成taobao

3、创建项目

# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令 # 如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中 vue create 项目名称(创建时会自己以对应的项目名称生成目录) ## 例 vue create myproject # 上述命令中，可以允许变的就是`myproject`部分

以下步骤以Vue CLI v4.5.6为例，仅供参考，在实际使用时，请以自身需求为准进行配置

预设选择

第一个是默认的Vue 2 项目 集成了babel 和 eslint 第二个是默认的Vue 3 （预览版本） 集成了babel 和 eslint 第三个是自定义的类型

选择预设功能（根据自身项目需要选择）

选择Vue版本

选择ESlint配置（如果启用）

选择额外的eslint功能

是否独立配置

是否保存本次操作预设

项目创建成功

4、目录结构介绍

src（最主要的目录、后期很多操作都在这个目录中完成） main.js：项目/程序入口文件 （该文件中JavaScript代码都会被执行）App.vue：根组件（万物之根）components：自定义的功能组件assets：静态资源目录（图片、视频、音频等就是静态资源）views：（刚刚创建好的项目是没有的，后期会用到）存放视图组件的

5、项目的运行及注意事项

###5.1、项目的启停

如上图所示，在创建项目完成后有提示我们后续的操作：

在命令行中进入项目目录运行npm run serve命令来启动项目

按照上述命令执行后，我们会见到如下的效果，即表示项目运行成功：

注意：默认端口号会从8080开始，如果再次启动其他项目后续会以8081、8082……进行监听。

如果需要停止正在运行的项目，可以选择以下两种方式任一：

关闭终端在终端中按下组合键Ctrl + C（Cancel），随后选择Y并键入回车（如下图）

5.2、关于ESlint

ESlint用于规范项目的编码，大型项目一般多人开发，为了避免一些个人编程恶习坑自己坑别人，项目中使用了ESlint会起到紧箍咒的作用，强制开发人员注意代码规范。例如，在不使用ESlint的情况下，JS允许我们声明一个不变量但不使用。如果使用了ESlint，在上述情况下会报错如下：

关于ESlint的报错，有一份错误参照，可以访问以下地址查看：https://cn.eslint.org/docs/rules/