前端工程化-vue项目创建

可以使用html、css、javascpript ,以及使用vue、axios等技术搭建前端页面,但效率低、结构乱。

实际前端开发:

前端工程化开发步骤:

一、环境准备

1.安装NodeJS2. 安装vue-cli

二、创建Vue项目

有两种方式创建,一般采用第二种图形界面的方式创建,vue ui ,输入命令后呈现下图:

创建后的项目各目录的含义:

src中 APP.vue(以前的页面是.html结尾的,脚手架中都是以.vue结尾,没有.html文件了) 代表的就是页面,这里也称组件。是vue已经定义好的组件;views中则是用户自定义的组件。main.js、App.vue、views、router四个文件(夹)重点关注。

三、vue项目启动

两种启动方式,图形化界面、命令行

1.图形化界面启动

vscode中,展示npm脚本; 点击serve vue-cli-service serve

项目运行成功界面 :

按ctrl +c 终止项目

通过Local中的 http://locatehost:8080可以访问 vue-cli项目。

因为8080端口是后端tomcat默认的端口号,所以,还需要修改端口号:

相关推荐
椒盐螺丝钉2 小时前
Vue Router应用:组件跳转
前端·javascript·vue.js
顾安r2 小时前
11.20 开源APP
服务器·前端·javascript·python·css3
敲敲了个代码3 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试
少云清3 小时前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
倔强青铜三3 小时前
AI编程革命:React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程
天外飞雨道沧桑4 小时前
前端开发 Cursor MCP 提效工具配置
前端·vscode·ai编程·开发工具·cursor
朱哈哈O_o4 小时前
前端通用包的作用——jquery篇
前端
葡萄城技术团队4 小时前
纯前端驱动:在线 Excel 工具的技术革新与实践方案
前端·excel
芳草萋萋鹦鹉洲哦4 小时前
【vue】调用同页面其他组件方法几种新思路
前端·javascript·vue.js
巴啦啦臭魔仙4 小时前
uniapp scroll-view自定义下拉刷新的坑
前端·javascript·uni-app