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/