快速创建Vue的第一个项目

最新推荐文章于 2024-05-06 18:46:17 发布
最新推荐文章于 2024-05-06 18:46:17 发布
阅读量66 收藏
点赞数
文章标签： vue.js vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z352509593/article/details/135071027
版权

什么是Vue？

Vue.js是一个渐进式javascript框架，渐进式就是由浅入深、由简单到复杂的方式去使用Vue.js。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。与此同时，Vue、 React 和 Angular 是当前应用最广的三大前端框架，仅从 GitHub 趋势来看，Vue 更是排在了第一位，目前已经达到了 17 万的 Star。

创建Vue项目的工具

Visual Studio Code


Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器， 可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js​的内置支持 ，也是一款免费的跨平台代码编辑器，支持多种编程语言和框架，包括JavaScript、TypeScript、Python、C#等。它具有智能感知、调试、 Git 版本控制、插件扩展等丰富的功能，并提供了用户友好的界面和高效的工作流程。Visual Studio Code可以用于开发Web应用程序、桌面应用程序、移动应用程序等，也可作为普通文本编辑器使用。由于其轻量级、快速、易扩展的特点，Visual Studio Code已成为开发者们喜爱的工具之一。

没有安装的也可点击连接到官网下载：Visual Studio Code - Code Editing. Redefinedicon-default.png?t=N7T8https://code.visualstudio.com/

Node.js

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。没有安装的也可点击连接到官网下载：Node.Js中文网 (p2hp.com)icon-default.png?t=N7T8https://nodejs.p2hp.com/

创建项目前的准备

检验Node的安装情况

检查Node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

vue cli 脚手架的安装

 通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

npm install -g @vue/cli

PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装：

安装淘宝镜像的命令行

①  npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

 ②  cnpm install -g @vue/cli

如果能出现以下界面，即代码vue cli 脚手架安装成功。

项目的创建

为了怕大家第一次创建找不到项目，我们在桌面创建一个新的文件夹Vue，再从Vue中打开cmd命令框

vue create 命令创建项目

helloworld 是项目名，可自行定义          

1.创建项目命令行   vue create helloworld  然后回车

2.问你是否选中该路径快速创建项目选择YES

3.不选择Vue3和Vue2，选择第三个Manually select features

4.再选择第一个和第四个以及第六个

5.再选择2.X

6.再选择如下，问我们是否保存选择YSE

7.如下图，即创建项目成功

小结

今天我们学习了快速创建Vue项目相信大家看完有一定的收获。种一棵树的最好时间是十年前，其次是现在！ 把握好当下，合理利用时间努力奋斗，相信大家一定会实现自己的目标！加油！创作不易，辛苦各位小伙伴们动动小手，三连一波！！本文中也有不足之处，欢迎各位随时私信点评指正

关己则乱995
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中点击active并第一个默认选中功能的实现
12-28
在jQuery中： 就是让第一个选中，其他的不选中！ 当点击后当前选中，其他不选中。 有一种绕口令：东边的喇嘛买了西边的喇叭 o((⊙﹏⊙))o 在Vue中快速创建与选中 1.遍历出来， 在click中赋值 遍历出来的mx。 2.class进行决定是否显示，一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本，然后返回一个true能显示当前的了 4.把最后一个瑕疵补上， 让第一个默认选中。就是把activeName放一个数值就行了 <template> <div id=app> <ul> <li v-for=(mx, key)
Net5WebTemplate：一个多项目解决方案模板，用于在Clean Architecture原则指导下使用Vue.js和.NET 5 Framework创建企业级
02-09
.NET 5 Web模板 一个多项目解决方案模板，用于在Clean Architecture原理指导下使用Vue.js和.NET 5 Framework创建企业级。 用例 快速跟踪企业级.NET 5解决方案的创建过程，该解决方案具有用于API版本控制，应用程序日志记录，CQRS和单元测试的扩展名。 入门 使用下面提供的说明启动和运行项目。 先决条件 您将需要以下工具： （16.8版或更高版本） 技术领域 Vue.js（ ） .NET Core 5.0 ASP.NET Core 5 实体框架核心5 xUnit，NSubstitue和FluentAssertions 第三方图书馆 自动贴图 流利验证 MailKit 中介 日志 十字花 学分 （ 清洁架构”模型极大地影响了该解决方案的结构。 版本号 分支正在运行.NET 5.0 执照 此项目已获得MIT许可证的许可-有关详细
基于SpringBoot+Vue开发一个前后端分离的书籍分享管理系统源码+项目说明.zip
01-08
【资源说明】 1、基于SpringBoot+Vue开发一个前后端分离的书籍分享管理系统源码+项目说明.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于SpringBoot+Vue开发一个前后端分离的书籍分享管理系统源码+项目说明.zip ## 快速部署 1. 数据库脚本使用 Flyway 管理，**不需要手动导入数据库脚本**，只需要提前在本地 MySQL 中创建一个空的数据库 ，并修改项目中关于数据的配置（resources 目录下的 application.properties 文件中）即可 2. 在 IntelliJ IDEA 中打开 项目 **OK，至此，服务端就启动成功了，此时我们直接在地址栏输入 `http://localhost:8081/index.html` 即可访问我们的项目，如果要做二次开发，请继续看第4步。** 4. 进入到vuehr目录中，在命令行依次输入如下命令： ``` # 安装依赖 npm install # 在 localhost:8080 启动项目 npm run serve ``` 由于我在 项目中已经配置了端口转发，将数据转发到 Spring Boot 上，因此项目启动之后，在浏览器中输入 `http://localhost:8080` 就可以访问我们的前端项目了，所有的请求通过端口转发将数据传到 Spring Boot 中（注意此时不要关闭 Sprin gBoot 项目）。
基于SpringBoot+Vue大学生科创项目在线管理系统的设计与实现（源码+部署说明+演示视频+源码介绍）.zip
03-09
这是一个基于SpringBoot和Vue的大学生科创项目在线管理系统。系统的主要功能包括项目的创建、管理、查询，以及用户的注册、登录等。 系统后端采用SpringBoot框架，SpringBoot是一个基于Spring4.0设计的开源框架，其设计目标是用来简化新Spring应用的初始搭建以及开发过程。SpringBoot使用了特定的配置方式，从而使开发人员不再需要定义样板化的配置。通过这种方式，SpringBoot致力于在蓬勃发展的快速应用开发领域成为领导者。 系统前端采用Vue框架，Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。 本系统的设计目标是提供一个简单易用、功能全面的在线项目管理平台，帮助大学生们更好地管理和推进他们的科创项目。通过这个项目，学生可以学习到如何使用SpringBoot和Vue进行全栈开发，同时也可以提高他们的项目管理能力。 源码包含了完整的后端代码和前端代码，部署说明详细介绍了如何将系统部署到服务器上，演示视频展示了系统的主要功能和操作流程，源码介绍则详细解释了代码的结构和主要功能的实现方式。
Vue技术栈开发实战视频快速入门
06-25
视频资源目录： 01使用vue-cli3创建项目；02路由基础篇；03路由进阶篇；04状态管理bus的使用；05状态管理Vuex(一)；06状态管理Vuex(二)；07状态态管理Vuex进阶；08Ajax请求实战；09使用Mock模拟Ajax请求；10Vue中第三方JS库的使用。。。。；26项目部署
Vue-cli快速创建vue项目
qq_52851550的博客
07-29 286
带你快速使用vue-cli脚手架搭建vue项目
VsCode创建第一个vue项目
u012154630的博客
01-24 5139
转载自：https://www.cnblogs.com/z45281625/p/9015380.html VsCode创建第一个vue项目 使用vue-cli快速构建项目  ( vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 安装vue-cli之前，需要先安装了vue和webpack ) · node -v //(版本低引起：bash: npm: comman...
如何快速创建一个vue3项目
程序员柚子的博客
12-05 422
创建一个vue3项目详细教程
如何使用vue创建第一个项目
2301_78621721的博客
06-12 151
Vue CLI是一个基于Vue.js的快速开发工具，可以帮助我们快速创建Vue.js项目和组件。使用Vue CLI创建新项目非常简单。现在，您可以在浏览器中访问http://localhost:8080/来查看您的Vue.js应用程序。在开始之前，请确保您已经安装了Node.js和npm。您可以从官方网站下载最新版本。运行上述命令后，您将被提示选择预设配置。您可以选择默认配置或手动选择要安装的特性。以上就是使用Vue.js创建第一个项目的详细步骤。1.安装Node.js和npm。2.安装Vue CLI。
VSCode创建第一个Vue项目
m0_52457734的博客
12-16 957
VSCode创建第一个Vue项目
SpringBoot项目基于springboot+vue的游戏交易系统.zip
04-14
SpringBoot项目基于Spring Boot Vue的游戏交易系统是一个为游戏玩家设计的在线游戏道具交易平台。它结合了Spring Boot的后端快速开发特性和Vue.js在前端的高效渲染能力，整合了用户账户管理、商品上架、订单处理、...
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目完结10章
01-15
首先，我们先选择合适的应用开发框架是外卖系统成功开发的第一步。诸如React、Angular、Vue等现代化的前端框架，以及Node.js、Ruby on Rails、Django等后端框架，能够提供稳定、快速、高效的开发环境。 另外，外卖...
如何简单快速的创建vue项目
weixin_70245286的博客
04-14 207
作为前端开发职业人一定要自己创建vue项目，很多时候我们都需要自己创建，今天我记录一下这个方法提示：以下是本篇文章正文内容，下面案例可供参考以上就是最简单的创建vue项目的方法，配置更加直观，大家有啥更简单的可以分享一下。
使用vuecli 快速创建vue3项目
一个前端开发者
04-25 5130
文章目录一、安装最新vue-cli二、创建项目三、运行项目四、总结 提示：以下是本篇文章正文内容，仅供参考 一、安装最新vue-cli 官方网址：https://cli.vuejs.org/ 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Node 版本要求 Vue
谈谈如何利用vue脚手架快速创建一个项目
loveu22death的博客
05-16 390
首先你必须要准备的两个工具 1.node 2.vue脚手架 我们需要提前下好node和vue脚手架才可以开始创建项目，那怎么看我们是否有安装好node和vue脚手架呢？我们往下看。 我们可以新建一个文件夹，然后 同事按住ctrl+shift+鼠标右键进入 windowspowershell，如下图所示 windowspowershell是window10给我们提供的一个命令行工具，和cmd黑窗口类似，黑窗口也可以进行改操作，进去以后我们可以键入指令 vue -V 和node -V 分别查看我们
从零创建一个Vue3+ts项目
2301_76796512的博客
06-30 650
新建一个脚手架项目：bmdsutdios-mobile-client。注意：安装node15以上的稳定版本。自动引入组件的插件需要它。配置VueCLI的配置文件：vue.config.js。详见vant组件库：van-tabbar。初始化App.vue的默认结构。
快速用IDEA创建第一个Vue程序
Kristabo的博客
08-28 841
（1）在Vue官网中找到下载“vue.min.js”文件到本地或者直接在搜索引擎中搜索“Vue.js cdn”去获取vue.js对应的scripts标签，进行复制即可。（2）在IDEA中下载Vue插件，点击菜单栏中“文件-设置-Plugins-搜索Vue.js”,点击下载，下载完成后即可。当然这也并不算一个严格意义上的Vue程序，但可以作为一个很好的了解方式。...
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 428
注释很详细，直接上代码……
v-for中的key是什么作用
最新发布
qq_39196447的博客
05-06 262
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢?我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新Inodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
vue 离线创建项目能加速吗
08-19
- *1* *2* *3* [VUE-第一个vue-cli项目](https://blog.csdn.net/m0_46983722/article/details/124352160)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值