Vue CLI 学习手记

淡淡的烟草味﹌ 2021-10-19 02:34 340阅读 0赞

# 简介 #

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里面。

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue学习笔记：Vue CLI 3的学习

定义 Vue CLI官方定义：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供诸多功能。例如：通过 @`vue/cli` 搭建交互式的项目脚手架；通

港控/mmm°/ 2023年08月17日 16:35/ 0 赞/ 118 阅读

相关 Vue学习记录（三）-------- vue-cli新建项目

1、环境搭建安装node.js 全局安装vue-cli (以上两步请自行百度……) 2、新建Vue项目在命令行中输入 vue

比眉伴天荒/ 2023年06月25日 04:44/ 0 赞/ 34 阅读

相关 Vue CLI

Vue CLI 1、简介 2、安装 3、创建项目 3.1 vue create 1、简介在开发大型单页应用时，需要烤炉项目的组

清疚/ 2022年08月31日 02:27/ 0 赞/ 135 阅读

相关 vue-cli

使用vue-cli的优势 ![20180502002358343][] vue-cli提供一套命令，不用费劲自己去搭建配置，直接启动服务器，采用热加载服务器，

秒速五厘米/ 2022年05月26日 12:05/ 0 赞/ 152 阅读

相关 jquery学习手记（1）

1.$ vs $() $()方法中的参数是jQuery选择器并调用该选择器的方法，格式如下所示： `$.fn`,例子：$("h1").remove();自动接收和返回该

绝地灬酷狼/ 2022年04月22日 15:34/ 0 赞/ 244 阅读

相关 vue-awesome-swiper 手记

一、获取到swiper对象使用方法的问题因为在vue上使用swiper是以引入组件的方式直接使用所以要获取到swiper对象才能够去调用它的一些方法，，，，比如sl

偏执的太偏执、/ 2022年03月29日 09:54/ 0 赞/ 296 阅读

相关 vue学习 - 配置安装+vue-cli Demo

前言 vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库

客官°小女子只卖身不卖艺/ 2022年03月08日 06:18/ 0 赞/ 136 阅读

相关 Vue-CLi

介绍2种Vue架手脚方式安装(安装前提是本机必须装好node.js) npm install --global vue-cli 1.vue init webpack vue

左手的ㄟ右手/ 2022年02月20日 09:48/ 0 赞/ 179 阅读

相关 Vue学习笔记（一）------脚手架vue cli

脚手架vue-cli(3.x) vue-cli是一个基于vue.js进行快速开发的完整系统，提供下面几个功能：通过 `@vue/cli` 搭建交互式的项目脚

蔚落/ 2022年01月20日 01:09/ 0 赞/ 618 阅读

相关 Vue CLI 学习手记

简介 VueCLI其实就是vue为了方便开发，迅速搭建项目目录，基本配置，测试等创建的命令集。下面几个重要 Vue CLI全局安装比较好，因为我们需要他创建一个Vue项

淡淡的烟草味﹌/ 2021年10月19日 02:34/ 0 赞/ 341 阅读