Vue-前端工程化

前后端开发模式

早期开发是前后端混合开发
即前后端代码写在一个工程中
前端写完给后端,后端发现问题反映给前端,后端就需要懂全栈
Vue-前端工程化_第1张图片

Vue-前端工程化_第2张图片
Vue-前端工程化_第3张图片

YAPI(接口在线管理平台)

一个接口管理和编辑平台
现在已经没有在维护了

Vue-前端工程化_第4张图片

Vue-前端工程化_第5张图片
还有mock服务
就是根据你编写的来生成一个网址,然后你访问的话
会进行对应数据的返回
如图
Vue-前端工程化_第6张图片
Vue-前端工程化_第7张图片

前端工程化

很多小白理解的前端工程就是这样
资源没有同一管理
js内部,代码复用性不高
Vue-前端工程化_第8张图片

Vue-前端工程化_第9张图片

环境准备

vue项目提供了一个脚手架
可以快速生成vue模板
Vue-前端工程化_第10张图片

首先准备nodejs的环境
找个nodejs安装博客或视频进行安装以及环境配置
Vue-前端工程化_第11张图片
Vue-前端工程化_第12张图片

Vue项目

在想创建Vue项目的文件夹下
开命令行
输入vue ui即可使用图形化界面来创建Vue工程
Vue-前端工程化_第13张图片
Vue-前端工程化_第14张图片
Vue-前端工程化_第15张图片
经历一系列的选择后
创建出来这个项目
再用vscode打开就行
Vue-前端工程化_第16张图片
这是具体每个文件对应但是干嘛的
Vue-前端工程化_第17张图片

Vue-前端工程化_第18张图片
可以通过这个文件来改端口号
Vue-前端工程化_第19张图片

开发流程

1.我们main里面导入App.vue组件成为App
再建一个vue对象,render是创建虚拟dom元素,并且把vue对象实例挂载到#app
而这个区域就是index.html的div区域
所以我们打开默认首页才会有页面
Vue-前端工程化_第20张图片
Vue-前端工程化_第21张图片

Vue-前端工程化_第22张图片

你可能感兴趣的:(前端,前端,vue.js,javascript)