手记

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

课程名称:前端工程师

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

主讲老师:Dell

课程内容:

第1章 项目初始化

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

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

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

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

2.vue3目录结构

  • 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

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

课程收获:

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

1人推荐
随时随地看视频
慕课网APP