vue- 创建wms-web项目

vue 发展历程

vue- 创建wms-web项目_第1张图片 vue- 创建wms-web项目_第2张图片

 安装vite

第一步

 创建wms-web项目

vue- 创建wms-web项目_第3张图片

第二步

打开文件夹并安装所有开发环境的依赖

vue- 创建wms-web项目_第4张图片

 vue- 创建wms-web项目_第5张图片

 都可以放静态资源

public>vite.svg 不会重新编译成其他名字

assets>vue.svg  会重新编译成一个随机的名称

重新编译

vue- 创建wms-web项目_第6张图片

vue- 创建wms-web项目_第7张图片

启动

vue- 创建wms-web项目_第8张图片

 第三步

vue- 创建wms-web项目_第9张图片

vue- 创建wms-web项目_第10张图片 vue- 创建wms-web项目_第11张图片

 spa 单页渲染vue- 创建wms-web项目_第12张图片

 第四步

安装路由

vue- 创建wms-web项目_第13张图片

 vue- 创建wms-web项目_第14张图片

 vue- 创建wms-web项目_第15张图片

vue- 创建wms-web项目_第16张图片

vue- 创建wms-web项目_第17张图片

 第五步

加入路由

vue- 创建wms-web项目_第18张图片

 需要结合标签或者,两者相同

vue- 创建wms-web项目_第19张图片

做页面的导航,选中标签时,下面也会跟随改变 

 vue- 创建wms-web项目_第20张图片

 vue- 创建wms-web项目_第21张图片

vue- 创建wms-web项目_第22张图片

vue- 创建wms-web项目_第23张图片

vue- 创建wms-web项目_第24张图片 vue- 创建wms-web项目_第25张图片

卸载的时候触发

钩子函数里面写的都是表达式,因为它是一个方法  




浏览器页面 ​​​​​​​vue- 创建wms-web项目_第26张图片

 第六步

 vite.config.ts中设置相关配置

server中

host:

"0.0.0.0"  别人可以通过这个地址访问 

 "localhost" 本机

port:端口号

vue- 创建wms-web项目_第27张图片

别人可以通过这个地址访问 

需要安装一个组件

vue- 创建wms-web项目_第28张图片

vue- 创建wms-web项目_第29张图片

vue- 创建wms-web项目_第30张图片

vue- 创建wms-web项目_第31张图片

 更好的兼容

vue- 创建wms-web项目_第32张图片

 vue- 创建wms-web项目_第33张图片

vue- 创建wms-web项目_第34张图片

  第七步

Layout 布局 | Element Plus

vue- 创建wms-web项目_第35张图片

 安装npm install element-plus --save

vue- 创建wms-web项目_第36张图片

 第八步

加入按钮

vue- 创建wms-web项目_第37张图片

vue- 创建wms-web项目_第38张图片

vue- 创建wms-web项目_第39张图片

 第九步

加入Slider 滑块 vue- 创建wms-web项目_第40张图片

vue- 创建wms-web项目_第41张图片

  第十步

加入图标

vue- 创建wms-web项目_第42张图片

 vue- 创建wms-web项目_第43张图片

vue- 创建wms-web项目_第44张图片

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