前端开发的初认识

javascript/jquery

浏览数:233

2020-5-26

一、背景
1、前端是做什么的

前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。

2、前端需要掌握哪些技能

基本:HTML CSS JS ES6等
浏览器:cookies、session、localStorage等
服务端与网络:http/https、跨域、axios/fetch库、前端安全XSS/CSRF、websocket
前端框架:Vue/React/Angular
前端性能优化:服务端渲染、压缩打包、代码分割等

3、目前流行框架有哪些
Vue/React/Angular等
重点介绍:Vue/React
相同点:

a、使用 Virtual DOM
b、提供了响应式(Reactive)和组件化(Composable)的视图组件
c、将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库

不同点:

a、vue比react更容易上手
b、react更为繁荣

二、vue项目实战入门,快速构建工程
1、vue-cli 生成项目工程

a、打开bash终端工具,输入命令:cnpm install -g @vue/cli
b、通过命令创建工程:vue create vue-example
   为了直观的展示操作流程使用:vue ui
步骤:Vue 项目管理器->创建->输入项目名称->预设选择手动配置(勾选项参考下图1)->创建等待完成 



2、项目目录结构

├─build          webpack的一些配置文件以及服务启动文件
├─config         多为build中所依赖的文件
├─dist            
├─node_modules
├─src            页面以及逻辑文件夹
│ ├─assets
│ ├─components
│ ├─router
│ ├─App.vue
│ ├─main.js
├─static         字体以及公众样式文件夹
├─.babelrc       es6编译文件配置
├─.editorconfig  编写风格配置文件,比如缩进文件格式
├─.eslintignore  忽略检测一些文件格式
├─.eslintrc.js   代码规范化配置文件
├─.gitignore     忽略上传一些文件或配置
├─.postcssrc.js  用js来处理css
├─index.html     主文件入口
├─package-lock.json
├─package.json   npm依赖以及开发生产环境用的模块包
└─README.md      解释说明项目是做什么的

3、项目启动和打包

a、npm install   #安装工程依赖
b、npm run dev   #dev环境下启动
c、npm run build #工程编译打包
注意点:如果页面通过域名访问,需要将本地host,增加一条记录: #127.0.0.1 xxx.xxx.com
然后修改配置文件/config/index.js中的host、port
重新运行即可通过域名访问

三、flex布局深入讲解
1、flex介绍

利器:通过 1 个属性就能优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应。
首先要设置父容器`display: flex`,
然后再设置`justify-content: center`实现水平居中,
最后设置`align-items: center`实现垂直居中。
#dad {
    display: flex;
    justify-content: center;
    align-items: center
}

2、flex常用方法

3、flex实战

客服工作台-订单页面

四、其它工具介绍
less/sass,fetch,webpack

作者:fancy