【JavaWeb】Day16.前端工程化——Vue项目开发流程

最新推荐文章于 2024-09-05 20:16:05 发布

A仔不会笑

最新推荐文章于 2024-09-05 20:16:05 发布

阅读量370

点赞数 6

分类专栏： JavaWeb 文章标签：前端 vue.js javascript

本文链接： https://blog.csdn.net/m0_74197695/article/details/136887997

版权

JavaWeb 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

前端工程化

Vue项目简介

1.Vue项目-创建

2.Vue项目-目录结构

3.Vue项目-启动

4.Vue项目-配置端口

前端工程化

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

Vue项目简介

1.Vue项目-创建

创建项目的两种方式：

命令行：

vue create vue-project01

图形化界面：

vue ui

下面展示第二种方式：

按照下图创建项目

此时命令行开始生成项目

注意此过程需要联网

此时就已经成功创建Vue项目。

3.Vue项目-启动

此时会生成端口链接，点击链接即可进入项目的web界面

实际上访问到的页面是App.vue文件中的内容

现在改变“home”和“about”元素内容点击保存后可发现不需要刷新页面，页面自动修改内容

4.Vue项目-配置端口

改变运行的端口号

立减 ¥

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

javaweb项目文件.zip_javaweb_javaweb项目_javaweb项目开发_racea3s

09-23

在这个"javaweb项目文件.zip_javaweb_javaweb项目_javaweb项目开发_racea3s"压缩包中，我们看到它包含了一个名为"jspbbs"的子文件，这很可能是该项目的主要源代码目录。下面，我们将深入探讨JavaWeb项目开发的相关...

JavaWeb—Vue的简单介绍

weixin_45890113的博客

01-28

1751

概述数据渲染特点开发步骤①引入vue.js②定义一个div作为vue的容器③创建vue对象 3 Vue的格式 4 Vue指令介绍概述 Vue指令就是带""前缀的特殊属性 , 比如: , , , … 5 Vue文本操作概述通过v-text, v-html, 插值表达式将vue数据插入到html标签内容中 v-text : 不能解析html标签 , 可以解决插值闪烁 v-html : 可以解析html标签 ,可以解决插值闪烁插值表达式 : 不能解析html标签 , 不能解决插值闪烁

1 条评论您还未登录，请先登录后发表或查看评论

【Java生态前后端】开发web应用使用到的技术 & Vue框架+Java开发Web应用的步骤

JosieBook

06-07

3853

介绍一些开发web应用使用到的技术，以及使用Vue+Java的方式开发Web应用的过程和步骤。通过以上内容的了解，可对web应用前后端开发建立一个初步的认知。

JavaWeb——Vue

m0_50460160的博客

09-05

1128

Vite项目的入口为src/main.js 文件，这是vue.js应用程序的启动文件，也是整个前端应用程序的入口文件。Vue是一款用于构建用户界面的JavaScript框架,基于标准的HTML、CSS 和JavaScript构建，并提供了一套声明式的、组件化的编程模型;用于存放组件相关的文件,组件是代码复用的一种方式，用于抽象出一个可复用的部件，方便在不同的场景中进行重复使用。App.vue是vue中的核心组件，所有的其他组件都要通过该组件进行导入，该组件通过路由可以控制页面的切换;

Vue项目创建与启动（2023超详细的图文教程）

最新发布

09-28

本项目为基于Vue框架的asurplus-vue快速开发JavaWEB项目设计源码，包含458个文件，涵盖168个Java源文件、78个Vue组件文件、61个JavaScript文件、16个XML配置文件、11个模板文件、9个SCSS样式文件、5个YAML配置文件、...

JavaWeb项目-医疗管理系统（Vue.js、Element UI 、MySQL和 Servlet ）

04-24

 掌握前端 vue 框架、ElementUI 框架的使用，提升响应式设计以及组件化开发的思想  掌握 MySQL 关系型数据库管理和存储数据  掌握项目管理工具的使用，包括项目构建、版本控制以及依赖管理  能够独立设计和...

软件工程JavaWeb课程设计音乐播放器网页项目源代码.zip

06-08

软件工程JavaWeb课程设计音乐播放器网页项目源代码。软件工程JavaWeb课程设计音乐播放器网页项目源代码软件工程JavaWeb课程设计音乐播放器网页项目源代码。软件工程JavaWeb课程设计音乐播放器网页项目源代码软件工程...

vue项目启动步骤

qq_45591403的博客

07-31

8799

(1). 确保nodejs已经安装第一步 01-基础-vue-cli 工具-介绍内置开发时本地服务器，预览代码统一项目的目录结构内置开发过程中用到的各种工具 (1). babel编译 (2). eslint代码风格约束 (3). less预处理器内置开发时本地服务器，预览代码自动刷新，方便预览热更新其它高级功能 02-基础-vue-cli-安装安装 npm install -g @vue/cli # OR yarn global add @vue/cli 命令说明

Angular项目启动步骤

csdn122325735的专栏

06-10

7406

初学者启动angular 项目

JavaWeb—vue（具体使用包含案例）

夏日漱石的博客

04-04

1978

1.Vue组件库Element 1.1Element介绍 1.2 Element组件 1.2.1 Table表格 1.2.2 Pagination分页 1.2.3 Dialog对话框 1.2.4 Form表单 1.3案例 1.3.1案例分析 1.3.2代码实现 2.Vue路由 2.1 路由介绍 2.2 路由入门

Laravel企业信息化管理平台

weixin_50196917的博客

09-04

5332

一款 PHP 语言基于 Laravel5.8、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，同时支持多主题切换，可以根据自己喜欢的风格选择

VUE的使用—JavaWeb

wwl193206126的博客

03-28

639

VUE的使用

(Javaweb)Vue

2301_79144798的博客

07-25

616

1.model--数据模型：包含了很多的业务数据以及数据的处理方法2.view--视图层--数据的展示--DOM元素3.viewmodel--完成数据绑定的核心，实现model与viewmodel之间的数据连接其中，MVVM由三部分组成，model，view，viewmodelmodel--数据模型，包含业务数据以及数据的处理方法。view--视图层，负责数据的展示，相当于标签，DOM元素通过viewmodel，完成两只之间的数据绑定，是双向数据绑定的核心。

JavaWeb--05Vue项目简介

m0_73678713的博客

04-18

987

我们自习观察发现，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富，代码和内容不匹配，所以vue是如何做到的呢？此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。那么这个App对象怎么回事呢，我们打开App.vue,注意的是.vue结尾的都是vue组件。

JavaWeb--VUE

Eumenides_Suki的博客

03-12

1151

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。我们之前也学习过后端的框架MybatisMybatis是用来简化jdbc代码编写的；而VUE是前端的框架，是用来简化JavaScript代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下学习了VUE后，这部分代码我们就不需要再写了。那么VUE是如何简化 DOM 书写呢？