# common-vue

**Repository Path**: tonysb/common-vue

## Basic Information

- **Project Name**: common-vue
- **Description**: 基于vue2和vuecli4,项目初始化配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-20
- **Last Updated**: 2023-01-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# common-vue

vuecli4为基础,提供搭建vue项目之后,设置一些常用配置功能演示

## 配置各种环境变量

~~~javascript
1) 在项目根目录创建3个文件,分别为.env.build_prod/.env.build_test/.env.dev
   代表含义:正式环境/测试环境/本地开发环境
   .env.dev中内容如下
NODE_ENV = development (设置process.env.NODE_ENV环境)
ENV = 'dev' (设置package.json中启动命令对应环境-> vue-cli-service serve --mode dev)
VUE_APP_BASE_API = 'http://127.0.0.1:4000/dev' (设置各种变量,VUE_APP_变量名称,这样才能被全局读到)
(通过process.env.VUE_APP_BASE_API可以在项目任何js环境中读取到)
2) 配置debug调试环境
参考地址: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
tips: 在cmd中启动项目->在VSCode的debug中启动调试环境->会自动打开一个谷歌浏览器,只有在这个浏览器中才能走到断点
~~~

## 前端本身支持gzip

vue项目只会部署在nginx中

nginx中配置**gzip_static on**属性 + 前端webpack配置**compression-webpack-plugin**插件

浏览器访问项目,会首先主动去找前端打包项目中*.gz文件,减少请求文件体积

通过response headers中content-encoding是gzip来确定已经开启gzip,ETag中没有**\W**来确定gzip用的是前端本地的gzip文件,而没有依赖服务器nginx通过自己计算得到的gzip

## vue.config.js常用配置
+ 配置路径别名
+ 配置cdn,将常用体积大的第三方库按cdn方式引入,降低打包之后js体积
+ 配置不同环境(开发和生产)
+ 配置plugin和loader的方式
+ 配置compressionPlugin插件
+ 配置mock数据,前期前端可使用mock模拟数据进行开发

## 项目路径
public
   mock 存放mock数据
src
   assets            存放静态资料
   components        存放组件
      common         所有页面(a,b,c...)公用组件
      echarts        echarts二次封装的组件
   router            路由 
   store             存放vuex数据 
      modules        vuex按模块划分目录
         aModule.js
         bModule.js
      index.js       vuex主文件入口
   utils             存放工具类
   views             存放前端页面
      aView          a页面
         component   a页面抽象出来的组件,只给a页面用

## 搭建调试环境

+ 下载vue源码: git clone https://github.com/vuejs/vue
+ 安装依赖: npm install(安装phantom.js时即可终止)
+ 安装全局打包工具: npm install -g rollup
+ 修改package.json  17行 dev中value家  --sourcemap
+ 执行脚本: npm run dev

## 调试技巧

+ 打开指定文件: ctrl + p
+ 断点(进去函数,单步等等...)
+ 查看调用栈(Call Stack)
+ 定位文件在源码目录中位置: 在文件中右键(Reveal in sidebar)

## vue源码
webpack开发时候,直接用.vue文件,提前使用vue-loader提前将template中标签变成渲染函数,它属于预编译,使用程序之前已经准备好了,不是实时编译,预编译效率高
/src/platforms/web/entry-runtime-with-compiler.js
作用: 扩展$mount, 处理el和tampate的方式,这2种方式是携带编译器的
\src\platforms\web\runtime\index.js
作用: 定义一个patch函数,实现$mount
\src\core\index.js
作用: 初始化Vue中全局API
src\core\instance\index.js
作用: 
1) 声明构造函数
2) 




$mount(): template变成真dom,渲染页面,在页面形成最终用户看到的东西
render: 获取vdom
patch: 将vdom变成dom
一个组件一个watcher

stateMixin() -> new Vue() -> _init() ->  $mount() === mountComponent() -> new Watcher() -> updateComponent() ->render() -> _update()

Vue.set/delete/$watch等API
vue异步更新如何实现

## 虚拟dom

+ 理解vue批量异步更新策略
+ 掌握虚拟dom和diff算法

宏任务:晚于微任务执行,微任务清空之后,才会执行,在浏览器渲染之后执行

微任务: 同步代码执行完毕之后,会来执行微任务,清空微任务队列

nextTick(flushSchedulerQueue): 用异步方式
Queue中全部都是watcher对象

watch中run 真正执行更新的函数

then -> 


/src/core/vdom/patch.js updateChildren()
2个数组进行比较
old VNode  oldStartIdx    oldEndIdx
new VNode  newStartIdx    newEndIdx


## 权限