VUE学习二、创建一个前端项目

最新推荐文章于 2025-12-05 14:31:02 发布
原创 最新推荐文章于 2025-12-05 14:31:02 发布 · 279 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #学习

本文介绍了如何使用vueui创建Vue项目，包括启动vue脚手架、在WebStorm中管理项目并安装路由依赖，以及如何通过修改devServer配置来指定启动端口。

1.创建一个vue项目

使用命令 vue ui启动vue脚手架

vue ui

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
等待项目创建好 可以来任务栏启动项目 参数那里可以设置启动端口等参数
在这里插入图片描述
启动成功
在这里插入图片描述
成功访问
在这里插入图片描述

2. 用webstorm 打开项目

脚手架页面可安装基本依赖 比如路由
在这里插入图片描述

使用ws打开项目
在这里插入图片描述
在这里插入图片描述
启动项目 npm run serve
在这里插入图片描述

3.修改启动端口

在这里插入图片描述

devServer: {
    port: 8001
}
TimerShaft
关注
一文教你学会vue前端项目创建与开发
任聪聪的博客
09-07 1796
说明：自定义的项目结构对于我们后期的开发工作有着至关的作用，一个好的目录结构及配置能够在后续的工作中起到事半功倍的效果。timeout: 5000,//超时时间headers: {},});// 请求拦截器});},error => {// 响应拦截器},error => {},npm run dev 运行开发环境npm run b:prod 构建生产环境的代码。npm run b:stage 构建阶段环境的代码。
如何快速创建一个 vue3 项目？
sinat_33255495的博客
01-17 1441
Vue CLI：功能强大，支持多种配置和插件，适合复杂项目。Vite：开发体验极佳，启动速度快，适合现代前端项目。官方模板：简单快捷，适合快速上手。StackBlitz 和 CodeSandbox：在线编辑，无需本地环境，适合快速原型开发和学习。你可以根据自己的需求和偏好选择适合的方法来创建 Vue 3 项目。
Windows下创建Vue项目教程
weixin_44669966的博客
01-21 1204
1. 安装node.js https://nodejs.org/en/download/ 选择对应系统的node可执行文件 安装完成后，打开cmd 输入node -v 输入npm -v 都正常输出版本就可以进行下一步啦???? 2. 安装vue 使用npm去安装vue的话也可以，但是安装速度较慢，使用国内源镜像安装较快（所以这一步不是必须的） 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli脚
使用Vite创建一个vue项目
weixin_65961975的博客
07-18 1794
Vue.js是一个渐进式前端框架，凭借数据绑定和组件化开发优势，成为现代Web开发的热门选择。本文详细介绍了使用Vite创建Vue项目的步骤：首先检查Node.js版本（要求≥15），通过npm init vue@latest命令初始化项目（注意项目名使用小写），然后安装依赖并运行。针对可能出现的版本兼容问题，提供了升级Node.js或降级Vite两种解决方案，并给出了具体操作命令。最终成功运行后会显示默认Vue欢迎页面，完成项目搭建。该指南帮助开发者快速创建高效可维护的Vue工程。
如何设计一个合理的vue前端项目架构
CatchLight的博客
12-10 2016
this.$log('插件已加载');},
创建一个vue项目
cjq1276的博客
12-18 1467
（1）跳转到以下界面，默认为8080端口，我的8080端口被占用，所以启动了8081端口。（2）打开浏览器输入显示的网址：http://localhost:8081/，项目启动成功。（1）以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹，输入。推荐下载地址：https://nodejs.org/en/推荐下载地址：https://cn.vuejs.org/3、检查是否安装成功：如果输出版本号，说明我们安装node环境成功。2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功。
【Vue】从零开始创建一个vue项目
2302_79600390的博客
03-12 5722
Node.js 是 JavaScript 运行环境，npm 是包管理工具（类似“应用商店”），Vue 项目依赖它们。：快速生成 Vue 项目模板，类似“工厂流水线”自动创建项目结构。
Vue3学习-创建项目
weixin_58762718的博客
03-18 1708
本文介绍如何创建Vue项目，打开项目，运行项目，打包项目，前期准备可以查看和。
【Vue3】创建并运行一个简易的Vue3项目
天天开心a的博客
09-09 2460
本文介绍了如何创建并运行一个简易的Vue3项目，主要内容包括： 环境配置：安装Node.js和Vue CLI，配置环境变量； 创建Vue工程：通过命令npm create vue@latest创建项目，选择功能模块（如TypeScript、Prettier等）； 目录分析：讲解工程目录结构，包括.vscode/extensions.json、public、src等关键文件； 运行项目：通过npm run dev启动项目，访问index.html入口文件。 适合初学者快速上手Vue3项目搭建与基础配置。
Vue学习——搭建前端项目
weixin_42302996的博客
12-19 2247
Vue搭建前端项目 1.准备环境 需要安装nodejs,npm,cnpm等,使用的编辑器为vscode 2.创建项目 vue init webpack 项目名 项目创建完成后使用vscode打开，在终端运行 cnpm install cnpm run dev 3.目录结构 参考以下的目录结构，新建文件夹，下面打‘ * ’的为新建文件夹 ├── build // 构建服务和webpack配置 ├── config // 项目不同环境的配置 ├── dist
这是一个前端vite创建vue2带路由项目例子，还有vuex存储count值
08-18
在本项目中，开发者可以首先通过Vite创建一个新的Vue2项目，然后引入vue-router来设置项目的路由规则，例如定义首页、登录页或其他页面的路由路径。之后，开发者还需要引入vuex，并定义一个全局的state来存储count值...
前端最新Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马程序员，一套全通关！里面的大事件项目
08-12
通过全面而系统的教程学习，开发者将能够构建出一个完整的前端项目，并对前端开发的整个流程有深刻的认识和实践经验。 随着前端技术的不断进步，掌握Vue框架已成为前端开发者的必备技能之一。这套教程通过从基础到...
黑马小兔鲜前端项目学习（一）vue3和pinia
10-13
在深入探讨黑马小兔鲜前端项目的学习过程中，我们首先需要对Vue.js框架有一个基本的认识。Vue.js是一个流行的JavaScript框架，以其渐进式特性和易于上手的特性在前端开发领域广受欢迎。它采用了组件化的方式来构建...
Vue学习笔记(一)：从零开始创建一个Vue前端项目
热门推荐
江夏、的博客
09-02 1万+
一、开篇 最近公司的老的项目重构，改成了前后端分离的架构，前端采用的是vue.js前端框架，所以接触到vue.js。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库，它是以数据驱动和组件化的思想构建的。相较于其他的前端框架，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM，因为Vue.js是数据驱动的，所以无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 696
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
47、【Ubuntu】【Gitlab】拉出内网 Web 服务：Nginx 事件驱动分析（一）
HIT_Weston的博客
12-01 1228
本文分析了Python的http.server模块与Nginx在Web服务架构上的本质区别。作者指出http.server仅适用于开发测试，而GitLab等完整Web应用需要Nginx的高性能架构。重点阐述了Nginx的事件驱动模型：通过epoll实现异步非阻塞I/O，单线程可处理上万并发连接，避免了传统多线程的资源消耗。文章还展示了Nginx的C语言伪代码实现逻辑，说明其"不轮询、无阻塞、仅处理活跃连接"的核心机制。最后预告将继续深入分析Nginx配置优化等内容。
50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）
HIT_Weston的博客
12-04 1160
本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 1080
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南
最新发布
anscos的博客
12-05 713
西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。
用vue3框架做一个前端项目
05-01
好的，下面是一个简单的 Vue3 前端项目的步骤： 1. 安装 Node.js：前往 Node.js 官网下载安装 Node.js。 2. 安装 Vue CLI：在命令行中执行以下命令安装 Vue CLI。 ``` npm install -g @vue/cli ``` 3. 创建项目：在命令行中执行以下命令创建一个新的 Vue 项目。 ``` vue create my-project ``` 注意：在这里，my-project 是新项目的名称，你可以将它替换为你自己的项目名称。 4. 运行项目：在命令行中进入到项目目录并执行以下命令启动项目。 ``` cd my-project npm run serve ``` 5. 开始开发：打开你喜欢的代码编辑器，开始进行 Vue3 项目的开发吧。 这只是一个简单的 Vue3 前端项目的步骤，如果你想深入学习 Vue3，请参考 Vue3 官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值