为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第1天 项目实战:Vue.js仿京东到家电商全栈项目前端开发

课程名称:前端工程师

课程章节: 第1章 项目初始化

主讲老师:Dell

课程内容:

第1章 项目初始化

1-1安装对应的版本号,启动项目。

1-2 工程目录代码简介及整理

  1. 安装对应的插件eslint:代码编码提示校验,检查代码规范性

https://img1.sycdn.imooc.com//62ea25640001495809670354.jpg

2.vetur:识别Vue语法,高亮显示

https://img1.sycdn.imooc.com//62ea25e60001dec407740353.jpg

2.vue3目录结构

https://img1.sycdn.imooc.com//62ea27b40001f46903530523.jpg

  • 1)node_modules:npm install 安装项目依赖的三方模块到node_modules

  • 2)public:index.html(页面标签图标)存放整个项目默认的index.html模板,这里可以添加meta标签,可以加keywords等,favicon.ico存放的是项目title旁的小图标

  • 3).editorconfig 编辑器默认配置

  • 4)babel.config.js  存放vue用到的Babel配置

  • 5)package.json 存放项目的依赖包

  • 6)README.md(描述内容)

src 是最重要的源代码目录 

  • 入口文件main.js 

  • main.js调用App.vue组件 

  • assets目录,放静态文件 ,如图片 

  • components公用功能组件

  • router 路由定义 路由配置

  • store 存储vuex的全局数据

  • style(样式)

  • utils(request.js(axios请求工具封装)

  • views存放页面级别的组件,展示的页面

1-3 基础样式集成及开发模拟器的使用

  • vw+rem来控制响应式布局:       设置  1 rem = 100px = 26.66667vw.  等比例放大

  • 安装统一手机浏览器样式差异的插件,输入:npm install normalize.css --save

  • 让样式在所有的浏览器上显示一致

  • https://img1.sycdn.imooc.com//62ea27f9000106d003840271.jpg

课程收获:

终于学会分析工程代码目录结构,之后开启项目开发环节。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7
获赞与收藏
12

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消