Vue CLI(Vue.js 开发的标准工具)

news2024/11/18 14:34:58

Vue CLI(Vue.js 开发的标准工具)

  • 参考
  • 描述
  • Vue CLI
      • 获取
          • 检测
  • 项目
      • 创建项目
          • Please pick a preset
          • Check the features needed for your project
          • Choose a version of Vue.js
          • Prefer placing config
          • Save this as a preset for future projects?
          • Save preset as
          • Finish
          • 使用 GUI 图形界面创建项目
      • 运行项目
  • 项目文件的目录结构

参考

项目描述
Vue CLI 官方文档https://cli.vuejs.org/zh/
搜索引擎Bing
哔哩哔哩黑马程序员 Vue

描述

项目描述
npm8.19.3
@vue/cli5.0.8
操作系统Windows 10 专业版

Vue CLI

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。


上述内容引用自 Vue CLI 官方

Vue CLI 是 Vue.js 开发的标准工具,它简化了开发者基于 webpack 创建工程化 Vue 项目的过程。

获取

你可以使用如下命令来获取 Vue CLI:

npm install -g @vue/cli

或:

yarn global add @vue/cli
检测

在使用命令安装 Vue CLI 后,你可以在终端中输入如下命令来检测 Vue CLI 是否已安装成功,并通过该命令获取安装的 Vue CLI 的版本。

vue --version

或:

vue -V

项目

创建项目

你可以在终端中使用该命令在当前 工作目录 下创建一个项目文件(myproject):

vue create myproject
Please pick a preset

在终端执行上述命令后,你将被提示选取一个 preset(预设选项)。你可以通过使用键盘中带有上、下箭头的按键来选取合适的 preset。在选择合适的 preset 后,你可以通过敲击回车键(Enter)来提交你的选择。

选取 preset

其中:

选项描述
Default ([Vue 3] babel, eslint)选择此选项,你将创建一个包含了基本的 Babel + ESLint 设置的 Vue 3 项目。
Default ([Vue 2] babel, eslint)选择此选项,你将创建一个包含了基本的 Babel + ESLint 设置的 Vue 2 项目。
Manually select features选择此选项,你将 自定义 接下来将创建的项目。

这里我们将选择选项 Manually select features

Check the features needed for your project

在该界面中,你可以使用键盘中带有上、下箭头的按键来移动箭头,通过空格键(space)来选取合适的特征(features),通过敲击 a 来选择全部特征,通过 i 来反转选取的结果,通过敲击回车键(Enter)来提交你的选择。

选项

推荐将默认选中的特征 ** Linter / Formatter** 去除,该特征会对你的代码进行规范(但很严格),如果你的代码不符合规范将会抛出错误。在这里,我仅选择使用特征 BabelBabel 使软件开发者能够以偏好的风格来编写源代码而无视 JavaScript 的兼容性问题)。
最终结果

此时,请敲击回车键提交你的选择。

Choose a version of Vue.js

在这个界面中,你将选择构建 Vue 3.x 项目,或是构建 Vue 2.x 项目。

选项

这里,我将选择 2.x 以构建 Vue 2.x 项目。

Prefer placing config

这里你将选择如何处置选择的特征的配置文件,你可以选择 In dedicated config files 将各个特征的配置文件放在各自专属的配置文件中;你也可以选择 In package.json 将所有特征的配置文件放入 package.json 配置文件中。

选项

这里,我将选择 In dedicated config files 以将各个特征的配置文件放在各自专属的配置文件中去,这样能够方便日后对配置文件的使用。

Save this as a preset for future projects?

这里我们将选择是否将刚刚所做的所有选择保存以作为预设选项(preset)供后续使用。
你可以通过输入 yn 来决定是否保存刚刚的选择。

选项

这里,我将输入 y 以将刚刚所做的所有选择保存供后续使用。

Save preset as

这里你将输入一个标识符来标记保存的所有选择,该标识符将出现在以后你创建文件时的预设选项(preset)中,你可以通过选择该预设选项来创建与此时创建的项目相同(在项目名称上可能有所差异)的项目。

选项

Finish

当你看到你的终端中出现与此类似的内容时,表示你已经成功创建了一个 Vue 的开发项目。
结束标志

使用 GUI 图形界面创建项目

你可以使用如下命令以通过 Vue 项目管理器 对项目进行管理(包含创建项目功能):

vue ui

在使用上述命令后将自动打开浏览器并进入 Vue 项目管理器页面。

Vue 项目管理器

进入 Vue 项目管理器后,你可以开始创建项目。创建项目的过程与前面使用 CLI(命令行界面)创建的过程类似。

创建项目

运行项目

要运行项目文件,你首先需要切换工作目录至项目文件中的根目录下:

cd myproject

使用如下命令以 开发模式 运行当前工作目录下的项目文件:

npm run serve

使用如下命令以 发布模式 运行当前工作目录下的项目文件:

npm run build

当你使用在终端中运行上述命令后,你将于终端中观察到如下信息:

信息
你可以通过信息中的链接访问到你的项目。

访问项目后,你将得到如下内容:

Vue CLI 创建的默认项目

这是 Vue CLI 创建的默认项目。

项目文件的目录结构

项目文件的目录结构如下:

目录结果

其中:

项目描述
favicon.ico存放项目使用的网页图标。
assetsassets 文件夹用于存放项目中的静态资源文件,如 CSS 文件以及图片等文件。
components用于存放 Vue 项目中的组件。
xxx.config.jsxxx 对应的配置文件。

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

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

相关文章

[MRCTF2020]Ezaudit(随机数的安全)

目录 信息收集 代码审计 相关函数 前提知识 思路分析 补充知识 信息收集 查看源代码没有发现有用信息&#xff0c;尝试dirmap扫下目录 python3 dirmap.py -i 网址 -lcf 扫描时发现一个www.zip目录 下载到一份index.php文件&#xff0c;找到一个login.html <?php h…

docker安装pg数据库及pg数据库基本操作

一、首先准备pg数据库的docker镜像二、先创建一个文件作为pg数据库数据文件、配置文件等的外部挂载文件三、创建镜像docker run -it -d --name postgres14 --restartalways --privilegedtrue -p 5432:5432 -e POSTGRES_PASSWORDpostgres -v /home/fengyang/pg_data:/var/lib/po…

SpringBoot+VUE前后端分离项目学习笔记 - 【25 SpringBoot实现1对1、1对多、多对多关联查询】

新增课程Course页面&#xff0c;实现学生选课功能、课程教授老师选择等功能 1. 课程与授课老师是一对一关系 因为course表仅记录了teacherid&#xff0c;而页面需要的是老师的名字 select course.*,sys_user.id from course left join sys_user **on ** course.teacher_id sys…

第六章SpringFramework之声明事务

文章目录JdbcTemplate准备工作导入依赖创建jdbc.properties配置Spring的配置文件配置测试类的环境实例声明式事务概念先看看对应的编程式事务声明式事务通过一个案例了解声明式事务前提准备三层架构的构建模拟场景的情况添加事务Spring声明式事务的属性事务注解标识的位置事务属…

手把手教你学51单片机-点亮你的LED

单片机内部资源 Flash——程序存储空间。对于单片机来说 Flash 最大的意义是断电后数据 不丢失。 RAM——数据存储空间。RAM 是单片机的数据存储空间,用来存储程序运行过程中产生的和需要的数据,关电后数据丢失 SFR——特殊功能寄存器。通过对特殊工程寄存器读写操作,可以…

循环语句(循环结构)——“C”

各位CSDN的uu们好呀&#xff0c;我又来啦&#xff0c;今天&#xff0c;小雅兰给大家介绍的是一个知识点&#xff0c;就是循环语句啦&#xff0c;包括while循环、do-while循环、for循环&#xff0c;话不多说&#xff0c;让我们一起进入循环结构的世界吧 首先&#xff0c;我们先来…

利用Python暴力破解邻居家WiFi密码

如觉得博主文章写的不错或对你有所帮助的话&#xff0c;还望大家多多支持呀&#xff01;关注、点赞、收藏、评论。 文章目录一、编写代码二、展示测试结果三、测试四、生成密码本&#xff08;建议自己找一个密码本&#xff09;一、编写代码 在桌面新建一个文件 如果你新建的文…

如何实现everything的http外网访问

Everything是voidtools开发的一款文件搜索工具&#xff0c;官网描述为“基于名称快速定位文件和文件夹。”可以实现快速文件索引、快速搜索、最小资源使用、便于文件分享等功能。 everything部署本地后&#xff0c;可以开启配置Http访问功能&#xff0c;这样在局域网内就可以直…

【自用】Git日常开发教程

因为经常容易忘记指令&#xff08;年纪大了&#xff09;&#xff0c;所以打算记录一下将一堆文件从vscode上传到GitHub仓库 目录软件下载初始化状态过程可能出现的错误其他操作参考资料软件下载 https://gitforwindows.org/ https://code.visualstudio.com/ 初始化状态 过程 …

上海亚商投顾:两市缩量微涨,数字经济概念全线走强

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。市场情绪三大指数今日缩量震荡&#xff0c;黄白二线有所分化&#xff0c;题材概念表现活跃。数字经济概念全线走强&#xff0…

8、MariaDB11数据库安装初始化密码

MariaDB11安装 安装前准备 下载安装包 点我去MariaDB官网下载安装包 查看相关文档 Mariadb Server官方文档 使用zip安装 解压缩zip 将下载到的zip解压缩到想安装的位置。 生成data目录 打开cmd并进入到刚才解压后的bin目录&#xff0c; 执行mysql_install_db.exe程序生…

Flowable进阶学习(二)流程部署的深入解析

文章目录一、流程部署涉及表及其结构1. 部署流程代码示例&#xff1a;2. 流程部署所涉及表&#xff1a;3. 流程部署涉及表的结构、字段解析二、流程部署中数据的存储的过程一、流程部署涉及表及其结构 1. 部署流程代码示例&#xff1a; 设计俩个流程&#xff0c;并压缩成zip包…

项目引入多类数据源依赖,MyBatisPlus 是如何确定使用哪种数据源的?

背景 壬寅年腊月廿八&#xff0c;坚守在工作岗位。看了一下项目的 pom.xml 依赖&#xff0c;发现了好几个数据库连接相关的包&#xff0c;有 commons-dbcp2、c3p0、hikaricp、druid-spring-boot-starter&#xff0c;这可是四种不同的数据库连接池呢&#xff0c;一个项目中引入…

Github访问办法

GitHub GitHub是为开发者提供Git仓库的托管服务。这是一个让开发者与朋友、同事、同学及陌生人共享代码的完美场所。 GitHub除提供Git仓库的托管服务外&#xff0c;还为开发者或团队提供了一系列功能&#xff0c;帮助其高效率、高品质地进行代码编写。 GitHub的创始人之一Chr…

使用GPIO模拟I2C的驱动程序分析

使用GPIO模拟I2C的驱动程序分析 文章目录使用GPIO模拟I2C的驱动程序分析参考资料&#xff1a;一、回顾I2C协议1.1 硬件连接1.3 协议细节二、 使用GPIO模拟I2C的要点三、 驱动程序分析3.1 平台总线设备驱动模型3.2 设备树3.3 驱动程序分析1. I2C-GPIO驱动层次2. 传输函数分析四、…

SQL注入简介与原理

数据来源 本文仅用于信息安全学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 SQL注入 首先从SQL注入存在的代码来看 假如这里的id没有过滤&#xff0c;我们就可以输入…

JDK7-hashmap源码

解决冲突的方法 提高效率 特殊情况扰动算法 当冲突大于一定量时需要扩容 在JDK1.7中&#xff0c;HashMap是由数组单向链表实现的&#xff0c;原理图如下&#xff1a; HashMap基本用法 public static void main(String[] args) {//key-value, 数组存储头指针的引用地址&#xf…

SpringCloud项目日志接入ELK实战

写作背景 前面我对SpringCloud Netflix相关的组件&#xff0c;Eureka、Ribbon、OpenFeign、Hystrix和Zuul都进行了复习&#xff0c;后面随着代码越写越多就想着&#xff0c;要不就慢慢完善这个项目代码&#xff0c;把工作里用到的东西慢慢在这个Demo级别的项目里用起来&#x…

idea高效实用优化技巧

文章目录IDEA介绍配置优化注释模板快捷键硬件升级IDEA介绍 IDEA&#xff0c;全称IntelliJ IDEA&#xff0c;是Java语言的集成开发环境&#xff0c;IntelliJ在业界被公认为最好的java开发工具之一&#xff0c;尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、C…

gdb使用简介

目录 编译时&#xff0c;加入-g选项 不加-g选项&#xff0c;将不能加断点 加入-g选项&#xff0c;才能加断点 run与start start run break continue 编译时&#xff0c;加入-g选项 不加-g选项&#xff0c;将不能加断点 加入-g选项&#xff0c;才能加断点 run与start …