十三、Vue CLI（1）

news2024/10/2 10:40:58

本章概要

  • 简介
  • 安装
  • 创建项目
    • vue create
    • 使用图形界面

在开发大型单页面应用时，需要考虑项目的组织结构、项目构建、部署、热加载、代码单元测试等多方面与核心业务逻辑无关的事情，对于项目中用到的构建工具、代码检查工具等还需要一遍一遍地重复配置。
显然这很浪费时间，影响开发效率。为此，会选择一些能够创建脚手架的工具，来帮助搭建一个项目的框架，并进行一些项目所依赖的初始配置。
在Vue.js环境中，这个脚手架工具就是 Vue CLI ，利用这个工具，可以自动生成一个极具 Vue.js 的单页应用的脚手架项目。

13.1 简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，在 Vue 3.0 版本正式发布时，Vue CLI 将包名由原来的 vue-cli 改成了 @vue/cli
Vue CLI 有 3 个组件

  1. CLI （@vue/cli）

全局安装的 npm 包，提供了终端里的 vue 命令（如 vue create、vue serve、vue ui等）。它提供了通过 vue create 快速搭建新项目的能力，或者通过 vue serve 即时原型化新想法的能力。还可以通过 vue ui 使用图形用户界面管理项目。

  1. CLI 服务（@vue/cli-service）

CLI 服务是一个开发环境依赖。它是一个 npm 包，本地安装到 @vue/cli 创建的每个项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的，包含：

  • 加载其它 CLI 插件的核心服务
  • 一个为绝大部分应用优化过的内部 webpack 配置
  • 项目内部的 vue-cli-service 命令，包含基本的 serve、build 和 inspect 命令
  1. CLI 插件

CLI 插件时给 Vue 项目提供可选功能的 npm 包（如 Babel/TypeScript 转译、ESLint 集成、单元测试和端到端的测试等）。Vue CLI 插件的名字以 @cli/cli-plugin-（用于内置插件）或 vue-cli-plugin-（用于社区插件）开头，非常容易使用。当在项目内部运行 vue-cli-service 命令时，它会自动解析并加载项目的 package.json 文件中列出的所有 CLI 插件。
插件可以作为项目创建过程的一部分包括在项目中，也可以稍后添加到项目中。

13.2 安装

可以使用下面的命令安装 Vue CLI

npm install -g @vue/cli@4.5.9
# 或者
yarn global add @vue/cli@4.5.9

Vue CLI 在 Vue 项目开发中基本是必须的，因此要采用全局安装。
安装完成后，可以使用下面的命令检查版本是否正确，同时验证 Vue CLI 是否安装成功。

vue --version

在这里插入图片描述

以下为 vue 的卸载命令

# 3.0以下版本卸载
npm uninstall vue-cli -g

# 3.0以上版本卸载
npm uninstall -g @vue/cli

以下为 vue 的安装命令

# 安装的是最新版
npm install -g vue/cli

# 指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本 号
npm install vue-cli@2.9.6

# 安装的是3.0以上最新版
npm install -g @vue/cli

# 指定版本安装【指定版本为3.0以上版本】，其中3.11.0为 版本号
npm install -g @vue/cli@3.11.0

13.3 创建项目

安装完 Vue CLI ，就可以开始创建一个脚手架项目了。创建项目有两种方式：一种是通过 vue create [项目名] 命令，以命令行方式创建一个项目；另一种是通过 vue ui 命令 启动图形界面创建项目。

13.3.1 vue create

选择好项目存放的目录，打开命令提示符窗口，输入 vue create helloworld ，开始创建一个 helloworld 项目，如图：
在这里插入图片描述

提示：
项目名中不能有大写字母

首先会让你选择一个 preset （预设），第 1 和第 2 个选项时默认设置，适合快速创建项目的原型，此处不会用到第 1 个选项，因为它是针对 Vue 2.x 版本的。第 3 个选项需要手动对项目进行配置，适合有经验的开发者。这里使用方向键 ↓选择第 3 项，然后按 Enter 键，出现项目的配置选项，如下：
在这里插入图片描述

以上选项的说明如下表：

选项说明
Choose Vue version选择 Vue 版本
Babel转码器，用于将 ES6 代码转为 ES5 代码，从而在现有环境下执行
TypeScriptTypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。TypeScript 是由微软开发的开源编程语言，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上
Progressive Web App（PWA） Support支持渐进式 Web 应用程序
Routervue-router，参看《十四、使用Vue Router开发单页应用》
VuexVue 的状态管理，参看《十六、状态管理——Vuex》
CSS Pre-processorsCSS 预处理器（如Less、Sass）
Linter / Formatter代码风格检查和格式校验（如 ESLint）
Unit Testing单元测试
E2E Testing端到端测试

保持默认的 Choose Vue version 、Babel 和 Linter / Formatter 的选中状态，按 Enter 键，接下来会根据选择的功能提示选择具体的功能包，或者进一步配置，如图：
在这里插入图片描述

按↓键选中 3.x （Preview），按Enter键，开始配置代码格式和校验选项，如图：
在这里插入图片描述

第 1 个选项是指 ESLint 仅用于错误预防，后 3 个选项是选择 ESLint 和哪一种代码规范一起使用。ESLint 是用于代码校验的，至于代码风格，则由灵盖的规范来限制，如这里的 Airbnb config、Standard config 和 Prettier。至于选择哪种代码规范，这要看个人的喜好或公司的要求。这里先保持默认选，即第一个选项 ESLint with error prevention only。
接下来是选择合适检测代码。如下：
在这里插入图片描述

这里选择第 1 项：保存时检测。接下来是询问如何存放配置信息，如下：
在这里插入图片描述

第 1 个选项时指在专门的配置文件中存放配置信息，第 2 个选项是把配置信息放到 package.json 文件中。
选择第 1 个选项并按 Enter 键，接下来询问是否保存本次配置，保存的配置可以供以后项目使用，如下图。
在这里插入图片描述

如果选择了保存，以后再用 vue create 命令创建项目时，就会出现保存过的配置，然后直接选择该配置即可。
输入 y 并按 Enter 键，接下来是给本次配置取个名字，如下：
在这里插入图片描述

输入名字并按 Enter 键，开始创建脚手架项目，这中间会根据配置自动下载需要的包。项目创建完成后，界面信息如下：
在这里插入图片描述

根据提示在命令提示符窗口中依次输入 cd helloworld 和 npm run serve（运行项目）。运行结果如下：
在这里插入图片描述

打开谷歌浏览器，输入 http://localhost:8080/，即可看到这个脚手架项目的默认页面，如图：
在这里插入图片描述

要终止项目运行，在命令提示符窗口中按 Ctrl + C 组合键即可。
Vue create 命令有一些可选项，可以输入 vue create --help 查看这些选项。具体的选项说明如下：

-p, --preset <presetName>       //忽略提示符并并使用以保存的或远程的预设选项
-d, --default                   //忽略提示符并使用默认预设选项
-i, --inlinePreset <json>       //忽略提示符并使用内联的JSON字符串预设选项
-m, --packageManager <command>  //在安装依赖时使用指定的npm客户端
-r, --registry <url>            //在安装依赖时使用指定的npm registry
-g, --git [message]             //强制git初始化，并指定初始化提交信息(可选的)
-n, --no-git                    //调过git初始化
-f, --force                     //如果目标目录存在，则覆写它
--merge                         //如果目标目录存在，则合并它
-c, --clone                     //使用git clone 获取远程预设选项
-x, --proxy <proxyUrl>          //使用指定的代理创建项目
-b, --bare                      //创建脚手架项目时省略新手指导信息
--skipGetStarted                //调过显示 Get Started 说明
-h, --help                      //输出使用帮助信息

如果要删除自定义的脚手架项目的配置，则可以在操作系统的用户目录下找到 .vuerc 文件。该文件内容如下：
在这里插入图片描述

在这里插入图片描述

红框中的代码部分就是脚手架项目配置，如果不想要，删除即可。

13.3.2 使用图形界面

在命令提示符窗口中输入 vue ui，会在浏览器窗口打开Vue项目的图形界面管理程序。在这个管理程序中可以创建新项目、管理项目、配置插件和项目依赖、对项目进行基础设置，以及执行任务。
通过图形界面创建新项目的界面如图：
在这里插入图片描述

可以根据提示，分步完成项目的创建

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/54441.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大数据技术——结合Flume官方理解常用组件

大数据技术——结合Flume官方理解常用组件

Flume的常用组件包括Event和Agent。Agent又包含了Source、Channel以及Sink&#xff0c;本片文章将从官方说明文档入手&#xff0c;详细描述各组件以及组件的属性和功能。 文章目录1 常用的Source类型描述1.1 Netcat Source1.2 Exec Source1.3 Spooling Directory Source1.4 Tai…
阅读更多...
【SQL】redo log | undo log

【SQL】redo log | undo log

【SQL】日志redo日志和undo日志REDO LOGredo的整体流程UNDO LOG小结redo日志和undo日志 REDO LOG 称为重做日志&#xff0c;提供再写入操作&#xff0c;恢复提交事务修改的页操作&#xff0c;用来保证事务的持久性。 事务提交后&#xff0c;刚写完缓冲池&#xff0c;数据库宕…
阅读更多...
Linux 必知必会

Linux 必知必会

一、Linux 简介 Linux 与 Windows 和 Mac OS 等系统一样&#xff0c;它也是一个操作系统&#xff0c;并且是一个开源的类 unix 操作系统。凭借着其免费、安全、高稳定性等特点&#xff0c;被广泛应用于服务器、嵌入式开发等领域&#xff0c;并且在服务器领域一枝独秀&#xff0…
阅读更多...
docker-compose Install Prometheus

docker-compose Install Prometheus

前言 Prometheus是一个开源的系统监控和报警系统，现在已经加入到CNCF基金会，成为继k8s之后第二个在CNCF托管的项目，在kubernetes容器管理系统中，通常会搭配prometheus进行监控，同时也支持多种exporter采集数据，还支持pushgateway进行数据上报，Prometheus性能足够支撑上…
阅读更多...
蒙代尔-弗莱明模型

蒙代尔-弗莱明模型

蒙代尔-弗莱明模型 – 潘登的宏观经济学笔记 文章目录蒙代尔-弗莱明模型 -- 潘登的宏观经济学笔记IS-LM-BP蒙代尔-弗莱明模型资本完全流动固定汇率制度浮动汇率制资本完全不流动固定汇率制浮动汇率制资本不完全流动(KA主导&#xff0c;BP斜率小)固定汇率制浮动汇率制资本不完全…
阅读更多...
代码随想录刷题|买卖股票问题的总结

代码随想录刷题|买卖股票问题的总结

目录 总结 121.买卖股票的最佳时机 问题描述 特点分析 动态规划思路 122.买卖股票的最佳时机Ⅱ 问题描述 特点分析 动态规划思路 123.买卖股票的最佳时机III 问题描述 特点分析 动态规划思路 188.买卖股票的最佳时机IV 问题描述 特点分析 动态规划思路 309.最…
阅读更多...
tictoc例子理解 16-18

tictoc例子理解 16-18

tictoc16-18tictoc 16 全局信号signaltictoc 17 在仿真界面幕布上显示总条数信息tictoc 18tictoc 16 全局信号signal 前一步的主要问题是&#xff0c;如果我们想要更改所收集的统计信息&#xff0c;就必须修改模型的代码。统计计算深入到模型代码中&#xff0c;很难修改和理解…
阅读更多...
大型扫码点餐小程序系统源码

大型扫码点餐小程序系统源码

1. 开发语言&#xff1a;JAVA 2. 数据库&#xff1a;MySQL 3. 原生小程序 4. Sass 模式 5. 带调试视频 6. 可付费调试服务 扫码点餐小程序管理端&#xff1a; 数据统计&#xff1a;今日订单、堂食、预约、外卖、储值 堂食订单&#xff1a;订单号、商家、门店、类型、会员、桌位…
阅读更多...
Spring进阶（二十）之事件处理

Spring进阶（二十）之事件处理

目录 为什么需要使用事件这种模式 事件模式中的几个概念 使用事件模式实现上面用户注册的业务 事件对象 事件监听器 事件广播器 事件广播默认实现 自定义用户注册成功事件类 用户注册服务 下面我们使用spring来将上面的对象组装起来 测试用例模拟用户注册 添加注册…
阅读更多...
第四十篇 Vue封装swiper组件(v-swiper指令) 3.0

第四十篇 Vue封装swiper组件(v-swiper指令) 3.0

在前面讲到 Vue组件的封装不知道还记不记得&#xff0c;这里就不在过多的赘述&#xff0c;这里附上链接跳转可以进行回顾翻阅&#xff0c;上一篇内容​​​​​​​讲到这个自定义的指令&#xff0c;也就是为这篇封装swiper组件使用指令做铺垫的&#xff0c;那么也一同附在这里…
阅读更多...
电子电气架构设计之三电系统设计

电子电气架构设计之三电系统设计

文中缩略词参考 SSTS&#xff1a;Sub System Technical Specification&#xff0c;子系统功能规范 CTS&#xff1a;Component Technical Specification&#xff0c;部件功能规范 DCDC&#xff1a;Direct Current Direct Current Converter&#xff0c;直流转直流变换器 BMS&…
阅读更多...
Postgresql源码（92）深入分析HOT更新

Postgresql源码（92）深入分析HOT更新

0 概述与总结 hot更新已经有几篇分析了&#xff0c;这里是最后一篇&#xff08;总结性的&#xff0c;前面的可以忽略&#xff09;。前面在看update代码时&#xff0c;大部分集中在heap_update上&#xff0c;没有涉及寻找HOT链的逻辑。本篇重点看HOT链是如何使用的。 &#xf…
阅读更多...
[附源码]计算机毕业设计JAVA鑫地酒店酒水库存管理系统论文

[附源码]计算机毕业设计JAVA鑫地酒店酒水库存管理系统论文

[附源码]计算机毕业设计JAVA鑫地酒店酒水库存管理系统论文 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; …
阅读更多...
搜索技术——群智能

搜索技术——群智能

如果有兴趣了解更多相关内容&#xff0c;欢迎来我的个人网站看看&#xff1a;瞳孔空间 一&#xff1a;初识群智能 1.1&#xff1a;粒子群算法 粒子群算法&#xff0c;也称粒子群优化算法或鸟群觅食算法&#xff08;Particle Swarm Optimization&#xff09;&#xff0c;缩写…
阅读更多...
语音特征：spectrogram、Fbank(fiterbank)、MFCC

语音特征：spectrogram、Fbank(fiterbank)、MFCC

1.各种语音特征 语音特征用于语音识别和语音合成等。 语音特征有声谱图spectrogram、Fbank(fiterbank)、MFCC(Mel-frequency cepstral coefficients)等。 Fbank 特征提取方法就是相当 于 MFCC 去掉最后一步的离散余弦变换&#xff08;有损变换&#xff09;. 在深度学习之前…
阅读更多...
git学习笔记

git学习笔记

1、安装及配置git 1、到官网下载git安装包&#xff1a;https://git-scm.com/download/win 2、安装完成后&#xff0c;菜单栏有如下工具 3、配置账户和邮件信息 $ git config --global user.name "xxx"$ git config --global user.email "xxxmegvii.com"4…
阅读更多...
十大排序算法(C++)

十大排序算法(C++)

十大排序算法Sorting algorithm(C) 百度百科&#xff1a; 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。排序算法&#xff0c;就是如何使得记录按照要求排列的方法。排序算法在很多领域得到相当地…
阅读更多...
高通平台开发系列讲解（AI篇）如何让yolov5运行在SNPE

高通平台开发系列讲解（AI篇）如何让yolov5运行在SNPE

文章目录 一、模型下载二、模型转换三、模型量化四、后处理加速沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇章主要介绍高通平台SNPE SDK运行yolov5。 一、模型下载 首先去git上下载yolov5s的代码和模型https://github.com/ultralytics/yolov5 二、模型转换 采…
阅读更多...
Python爬虫实战，requests+xlwings模块，Python实现制作天气预报表！

Python爬虫实战，requests+xlwings模块，Python实现制作天气预报表！

前言 今天为大家介绍PythonExcel的实战项目&#xff0c;非常有趣&#xff0c;废话不多说。 Let’s start happily 开发工具 Python版本&#xff1a; 3.6.4 相关模块&#xff1a; xlwings模块 requests模块 pathlib模块 xlwings模块 json模块 环境搭建 安装Python并…
阅读更多...
RAR压缩包，去除密码？

RAR压缩包，去除密码？

压缩包设置了加密&#xff0c;需要输入压缩包密码才能够顺利解压文件出来。但是有些时候&#xff0c;一些文件只需要一段时间内要加密&#xff0c;之后文件不需要加密了&#xff0c;每次解压文件的时候还是需要输入压缩包密码才行&#xff0c;就很麻烦&#xff0c;那么RAR压缩包…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023