前端工程化认知
模块化、组件化、规范化、自动化
关键词认知
- mvvm：高内聚，低耦合
- vue架构：复杂大型项目，使用前规划
- vue内部指令
- vuerouter
- vuex
- npm之-S和-D；包管理配置文件
- webpack开发和上线使用不同初始化关键词
- webpack默认的打包入口文件及默认输出文件路径
- webpack前端工程化的具体解决方案；功能：前端模块化开发支持，代码压缩混淆，处理浏览器端js兼容性问题，性能优化
- webpack插件：自动打包构建；本地测试自动进入html页面
- loader：webpackc可处理css、less，url-file
- webpack打包发布命令build：“webpack --mode production”
- 自动删除webpack打包文件夹dist
- webpack后期出错处理：SourceMap，后期调试显示源代码；发布需删除SourMap。
- vue.js谷歌浏览器调试工具vue.js.devtools
- axios(丢弃jquery的ajax操作) 专注于网络请求的库，发送请求后，服务器传回数据，axios会将其包装返回网页
- await只能用在返回值为promise的实例，await只能用在被async修饰的方法中（异步请求）
- 解构赋值重命名{原名称：现名称}={}
- 单页面应用程序：spa
- 插入第5条之后：vue/cli：其为开发vue的标准工具，专注于撰写应用
- npm全局安装命令 -g
- 工程化项目中，vue通过main.js把app.vue渲染到index.html指定区域
- vue组件使用三步骤：使用import引入组件-使用components节点注册组件间-以标签的形式使用刚才注册的组件
- vue路径提示插件：Path Autocomplete
- vue中ref操作dom
- axios跨域操作
webpack基础操作流程实例
- 使用node包管理npm初始化包管理配置文件（前置：安装node.js）
- 建立src源代码目录
- src下建立首页html+js
- 初始化html首页格式，引入js文件
- 使用npm安装jquery
- js文件使用es6语法引入jquery，操作dom实现效果
已上过程运行会出现兼容性报错
- 使用webpack处理兼容性问题：项目文件中安装和配置webpack+webpack-cli
- 项目根目录中创建webpack.config.js配置文件，初始化基本配置
- 包管理配置文件中的scripts节点增加脚本指向webpack
- 终端运行命令启动项目打包构建，html引入man.js
@vue/cli基本操作实例
全局安装@vue/cli，使用“vue create 文件名”命令在需要的文件夹下创建项目文件，vue中src目录构成：assets存放静态资源文件；components封装、可复用组件存放位置；main.js项目入口文件，项目运行先执行此文件
