Vue CLI 学习手记

简介

VueCLI其实就是vue为了方便开发，迅速搭建项目目录，基本配置，测试等创建的命令集。下面几个重要

Vue CLI全局安装比较好，因为我们需要他创建一个Vue项目基本框架。VueCLI包括三个部分，CLI、CLI服务、CLI插件，

CLI：为我们创建Vue项目的基本目录结构和框架，主要命令 create 、serve

CLI服务：下面是3个功能，他主要和CLI插件一起辅助我们开发

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令

CLI插件：为我们开发项目提供辅助功能，如Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试

安装

npm install -g @vue/cli

这里需要注意，我们用的是目前最新的版本，Vue CLI 3.X

如果你还在用以前的版本，请使用 下面命令卸载以前版本，CLI3和CLI2、CLI1命令，目录结构等，都有所变化

npm uninstall vue-cli -g

检查安装是否成功

vue --version

基本命令解析

vue serve [options] [entry] :0配置启动服务器，其实和npm run dev效果是一样的，他还可以单独制定一个入口文件，当然，如果你不写，他的默认入口文件就是，APP.vue,main.js等。

vue build [options] [entry]：就是生产最后可以部署APP，

vue create hello-world：hello-world是项目名，可以修改，命令帮我们可以直接运行的基本项目框架，但是目录结构没有CLI2，那么复杂了，简化了很多，不要被吓到。创建过程会有选项让你选，都是平常使用的基本配置，后面我会单独介绍每项配置的作用

vue add 【插件名】：在vue create创建创建好项目以后，想要再添加其他插件，使用此命令

CLI服务

CLI和CLI服务的差别是前者运行在全局，而后者运行在项目本地，CLI服务比CLI能精确的操作我们的Vue项目

npx vue-cli-service serve [options] [entry]

npx vue-cli-service build [options] [entry|pattern]

npx vue-cli-service inspect [options] [...paths]:查看项目的 webpack config

npx vue-cli-service help：学习vue-cli-service 的命令

注意：有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令，这些命令你可以在package.json的scripts插件

开发目录分析

我们先vue create的时候，请选择通过配置文件进行配置，这样项目就会为我们的每个插件创建相应的配置文件，而不是所有的配置都写到package.json里面。