初识Vue-cli 3创建项目

最新推荐文章于 2025-02-12 00:00:45 发布
最新推荐文章于 2025-02-12 00:00:45 发布
阅读量219 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue项目学习 文章标签： vue-cli3 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42520314/article/details/85859498
本文介绍如何使用 Vue CLI 3 创建并配置项目，包括环境安装、项目初始化、选择配置项如 Babel、TypeScript、PWA、Router、Vuex、CSS预处理器、代码规范等，以及如何进行单元测试和端对端测试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

环境安装

在这里我们截取官网的图片简单方便

安装完成之后可以使用此命令检查您是否具有正确的版本

如上图显示则表示安装成功

创建项目

vue-cli3使用命令 vue-create projiectName 创建项目，弃用了vue-cli2的 vue init

可以自由选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功能”以选择所需的功能。

现在我们选择了自由配置，配置项如下:

  • 上↑ 与 下↓ 键切换目标选项，空格键选中或取消，a键全选，i键反选，回车确定选项（数字1-9对应9个选项）可直接按数字选中或取消
  • Babel：将ES6编译成ES5
  • TypeScript：JS超集，新增选项卡
  • PWA：模拟原生app，渐进式网络应用程序
  • Router：Vue路由
  • Vuex：Vue状态管理器
  • CSS Pre-processors：CSS预处理器
  • Linter/Formatter：代码规范
  • Unit Testing：组件单元测试,开发过程中前端对代码进行自测
  • E2E Testing：端对端测试，模拟用户真实场景

这里会提示是否使用路由器的历史模式？（需要为索引回退设置正确的服务器）（是/否）

这种模式利用 history.pushState API 来完成 页面跳转而无须重载页面

这里我们选择Yes

选择何种CSS预编译器，这里童鞋们根据个人喜好选择即可，博主选择的是第一种

选择何种代码规范配置，博主选择的是第一种

  • ESLint with error prevention only：只进行报错提醒
  • ESLint + Airbnb config：不严谨模式
  • ESLint + Standard config：正常模式
  • ESLint + Prettier：严格模式

这里选择语法检查的方式 1、保存就检查 2、fix和commit时候检查，根据个人喜好即可，博主选择的是第一种

这里提问选择哪一种单元测试 插件，根据实际情况选择

这里提示把babel,postcss,eslint这些配置文件放哪，1：独立文件 2：package.json     根据自己喜好(推荐放在package.json中)

最后呢，提问 是否记录一下？ 下次继续使用这套配置，这里我们就选择不记录了，选N

OK，这样就等待安装完成即可

安装完成后，我们开始进入项目根目录，进行项目测试

项目运行成功，完结撒花

 

Spring Boot+Vue前后端分离商城实战（十）脚手架工具 Vue-CLI
程序员有故事
05-30 683
初识 Vue CLI Vue CLI 简介 「CLI」是 command-line-interface 的缩写，全称为「命令行界面」。Vue CLI 是基于 Node 环境，集成了 Webpack 对文件进行编译、压缩、打包、ES6 转 ES5等一系列操作，目前最新的 Vue CLI 为 4.1.x 版本。 为什么要使用 Vue CLI 如果我们手动从零开始搭建 Vue 的开发环境，会遇到很多不必要的麻烦。虽然这样能让我们更好的学习整个 Vue 的生态，但是从项目的角度出发，为了更好地把精力放在业务上，并
vue-cil+vuex 构建一个简单的记事本应用
cc_fys的博客
07-18 1579
学习vuex文档稍微了解了一下vuex，这个练习用于应用一下vuex。构建一个简单的单页笔记本应用，加深对vuex的理解。 Demo：https://ccessl.github.io/test/ 实现效果：     安装npm和vue-cli这里就略过了，首先创建一个webpack模板项目 在命令提示符终端输入： npm init webpack 之后输入项目名称、描述等信息。因...
vue cli3 引用外部js方法
热门推荐
adenfeng的专栏
04-17 1万+
vue引用webVideoCtrl.js 1、在vue.config.js中添加 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')) .set...
关于vue编译版本引入的问题
weixin_34416754的博客
09-16 676
下班过目遇到一个错误 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, o...
初识vue-cli，创建vue项目
weixin_44042442的博客
03-28 1350
vue项目创建，解决创建找不到镜像问题
使用vue-cli快速创建vue项目
qq_41799870的博客
05-11 276
一、vue-cli初识 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供交互式的项目脚手架、零配置的原型开发、运行时依赖cli-serverce，该依赖 可升级 基于webpack构造并带有合理默认配置 可根据项目内配置文件进行配置 可通过插件扩展 此种条件下，各种构建工具可智能地配置衔接，十分方便 二、vue-cli几个组件 1、cli 一个全局安装的npm包，它提供了终端里的 vue 命令： vue-creat:快速搭建一个项目 vue serve：构建像想法的原型 vue
Vue-CLI最新详细安装教程【附安装包】
ZHOUPUYU的博客
11-28 1万+
vue-cli2025最新保姆级教程，Vue CLI（Vue.js Command Line Interface）是一个基于Vue.js框架的项目脚手架工具，用于快速生成Vue工程化项目的工具。‌ 它由Vue.js官方提供，旨在通过简单的命令行操作，帮助开发者快速搭建项目结构，包含项目所需的配置和依赖。变量【C:\Program Files\nodejs\】如果存在，就新建剩下的两个变量即可。显示（v22.11.0）版本号则表示node.js安装成功。这里我以输入vue create demo为例。
vue-cli介绍
weixin_49231143的博客
03-24 3963
学习vue的一个转折点是学习vue-cli(脚手架)，初识脚手架，一开始你会想到什么呢？是不是想工地里架起来的钢筋，条条框框的一个框架一样。让我们来一下了解一下cli 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考
【Vue 基础】vue-cli初始化项目及相关说明
ChaoChao66666的博客
04-26 1038
1. 创建项目 2. 项目文件介绍 3. 项目的其它配置 3.1 项目运行时，让浏览器自动打开 3.2 关闭eslint校验功能 3.3 src文件夹简写方法
vue-cli2与vue-cli3同时存在并全局调用
盏茶作酒的博客
03-20 893
哎，遇到类似 vue-cli2 和 vue-cli3 不能同时存在的问题，也实在是让人头疼的，偏偏一些项目升级的同时又要维护旧的系统，下面康康如何解决吧。（windows系统） vue-cli2 安装： vue-cli2 是在几年前初识 vue 就安装在全局了的，现只要解决 vue-cli3 的全局配置即可。 npm install vue-cli@2.9.6 /* vue-cli2 安装命令 */ vue-cli3 安装： vue-cli3 另外安装在其他任何文件夹下都可，使用命令.
vue3-01-初识vue3相对于vue2的提升与比较，使用vue-cli创建项目，使用vite构建工具创建项目
岂不闻
02-12 385
初识vue3-相对于vue2的提升与比较，使用vue-cli创建项目，使用vite构建工具创建项目
Vue之初识：使用idea第一个Vue项目
高新富的博客
03-22 4627
文章目录创建项目创建项目之后：自动编译创建项目之后：初始项目架构 创建项目 创建项目之后：自动编译 sr/local/bin/node /usr/local/lib/node_modules/npm/bin/npx-cli.js --yes --package @vue/cli vue create --default . npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#dep
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9473
未完
Vue入门：Webpack+vue-cli构建，从简单雏形到组件开发
Vue.js是一个流行的JavaScript前端框架，它基于MVVM（模型-视图-...随着对Vue.js深入理解，开发者可以逐步提升到工程性开发，借助Webpack和vue-cli这样的工具进行模块化打包和项目管理，从而创建出更复杂的单页应用。
冲床送料机程序中达优控一体机编程实践：成熟可靠，高借鉴价值，含详细注释 · 故障诊断 v2.0
08-09
内容概要：本文介绍了在中达优控一体机上编写的冲床送料机程序，该程序已在实际设备上批量应用，证明了其成熟可靠性和高借鉴价值。文章首先概述了冲床送料机程序的重要性和应用场景，接着详细描述了程序的设计思路和技术细节，包括采用模块化设计、PID控制算法和详细的程序注释。最后，文章总结了该程序的实际应用效果及其对现代工业制造的支持作用。 适合人群：从事工业自动化控制领域的工程师和技术人员，尤其是那些需要编写或优化冲床送料机控制程序的专业人士。 使用场景及目标：①理解和掌握冲床送料机程序的编写方法；②学习如何利用中达优控一体机实现高精度的送料控制；③借鉴成熟的编程实践，提高自身编程水平和解决实际问题的能力。 阅读建议：本文不仅提供了具体的编程技术和实践经验，还包含了详细的注释和模块化设计思路，因此读者应在实践中逐步理解和应用这些内容，以便更好地提升自己的技术水平。
A1SHB三极管芯片规格说明书
最新发布
08-09
资源下载链接为： https://pan.quark.cn/s/abbae039bf2a 无锡平芯微半导体科技有限公司生产的A1SHB三极管（全称PW2301A）是一款P沟道增强型MOSFET，具备低内阻、高重复雪崩耐受能力以及高效电源切换设计等优势。其技术规格如下：最大漏源电压（VDS）为-20V，最大连续漏极电流（ID）为-3A，可在此条件下稳定工作；栅源电压（VGS）最大值为±12V，能承受正反向电压；脉冲漏极电流（IDM）可达-10A，适合处理短暂高电流脉冲；最大功率耗散（PD）为1W，可防止器件过热。A1SHB采用3引脚SOT23-3封装，小型化设计利于空间受限的应用场景。热特性方面，结到环境的热阻（RθJA）为125℃/W，即每增加1W功率损耗，结温上升125℃，提示设计电路时需考虑散热。 A1SHB的电气性能出色，开关特性优异。开关测试电路及波形图（图1、图2）展示了不同条件下的开关性能，包括开关上升时间（tr）、下降时间（tf）、开启时间（ton）和关闭时间（toff），这些参数对评估MOSFET在高频开关应用中的效率至关重要。图4呈现了漏极电流（ID）与漏源电压（VDS）的关系，图5描绘了输出特性曲线，反映不同栅源电压下漏极电流的变化。图6至图10进一步揭示性能特征：转移特性（图7）显示栅极电压（Vgs）对漏极电流的影响；漏源开态电阻（RDS(ON)）随Vgs变化的曲线（图8、图9）展现不同控制电压下的阻抗；图10可能涉及电容特性，对开关操作的响应速度和稳定性有重要影响。 A1SHB三极管（PW2301A）是高性能P沟道MOSFET，适用于低内阻、高效率电源切换及其他多种应用。用户在设计电路时，需充分考虑其电气参数、封装尺寸及热管理，以确保器件的可靠性和长期稳定性。无锡平芯微半导体科技有限公司提供的技术支持和代理商服务，可为用户在产品选型和应用过程中提供有
CO2激光切割机控制系统：基于C#与STM32F407的多功能实现及其应用
08-09
内容概要：本文深入探讨了CO2激光切割机控制系统的开发与应用，特别是上位机C#源码和STM32F407控制板源码的作用。系统具备自动解析G代码、手动操作XY轴、回原点控制、坐标文件显示、图形缩放和拖动等功能。通过详细的功能介绍和技术细节展示，如G代码解析和图形显示的具体实现方法，揭示了该系统在提高加工精度和灵活性方面的优势。此外，STM32F407控制板的应用使其适用于雕刻机、切割机、写字机和点胶机等多种设备，进一步扩展了系统的应用场景。 适合人群：对嵌入式系统开发感兴趣的工程师、从事激光切割机相关工作的技术人员、希望深入了解工业自动化控制系统的开发者。 使用场景及目标：① 提供详细的C#源码和STM32F407控制板源码，帮助开发者快速搭建和优化激光切割机控制系统；② 展示如何利用G代码解析和图形显示提升加工精度和效率；③ 探讨STM32F407控制板在多设备中的广泛应用，增强系统的灵活性和适应性。 其他说明：本文不仅提供了理论指导，还附有实际代码示例，便于读者理解和实践。
C# ERP管理系统全源码解析：基于VS2012.net和SQLServer2008R2的企业资源规划解决方案
08-09
内容概要：本文介绍了基于C#语言开发的企业资源规划（ERP）管理系统，涵盖了系统的功能特点、开发环境、全源码结构及其应用价值。该系统集成销售、采购、库存、生产和财务管理等多个模块，旨在帮助企业实现资源优化配置和业务流程自动化。文中还展示了部分代码片段，如用户登录功能的实现，并强调了全源码开放的优势，便于企业根据自身需求进行定制化开发。此外，系统附带详细操作手册并提供完善的技术支持。 适合人群：对ERP系统感兴趣的开发者、企业管理者及IT技术人员。 使用场景及目标：适用于希望深入了解C# ERP系统架构和实现细节的开发者，以及需要构建或改进企业内部管理系统的公司。目标是通过学习和应用该系统，提升企业的信息化管理水平。 其他说明：本文不仅提供了理论介绍，还包括实际代码示例和操作指导，有助于读者更好地理解和实践。
基于JavaScript实现点击展开隐藏功能的示例代码
08-09
资源下载链接为： https://pan.quark.cn/s/9648a1f24758 在 JavaScript 中实现点击展开与隐藏效果是一种非常实用的交互设计，它能够有效提升用户界面的动态性和用户体验。本文将详细阐述如何通过 JavaScript 实现这种功能，并提供一个完整的代码示例。为了实现这一功能，我们需要掌握基础的 HTML 和 CSS 知识，以便构建基本的页面结构和样式。 在这个示例中，我们有一个按钮和一个提示框（prompt）。默认情况下，提示框是隐藏的。当用户点击按钮时，提示框会显示出来；再次点击按钮时，提示框则会隐藏。以下是 HTML 部分的代码： 接下来是 CSS 部分。我们通过设置提示框的 display 属性为 none 来实现默认隐藏的效果： 最后，我们使用 JavaScript 来处理点击事件。我们利用事件监听机制，监听按钮的点击事件，并通过动态改变提示框的 display 属性来实现展开和隐藏的效果。以下是 JavaScript 部分的代码： 为了进一步增强用户体验，我们还添加了一个关闭按钮（closePrompt），用户可以通过点击该按钮来关闭提示框。以下是关闭按钮的 JavaScript 实现： 通过以上代码，我们就完成了点击展开隐藏效果的实现。这个简单的交互可以通过添加 CSS 动画效果（如渐显渐隐等）来进一步提升用户体验。此外，这个基本原理还可以扩展到其他类似的交互场景，例如折叠面板、下拉菜单等。 总结来说，JavaScript 实现点击展开隐藏效果主要涉及 HTML 元素的布局、CSS 的样式控制以及 JavaScript 的事件处理。通过监听点击事件并动态改变元素的样式，可以实现丰富的交互功能。在实际开发中，可以结合现代前端框架（如 React 或 Vue 等），将这些交互封装成组件，从而提高代码的复用性和维护性。
使用vue-cli3离线创建Vue项目的Webpack基础文件
这个文件与Vue.js框架紧密相关，特别是通过vue-cli工具在离线环境下创建项目时所需的基本文件集合。 首先，需要了解的是Vue.js，它是一个渐进式JavaScript框架，用于构建用户界面。Vue的设计目标是通过尽可能简单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值