Vue-cli

全局安装脚手架（vue-cli）
npm install -g vue-cli

查看版本（vue -V）

初始化项目（vue init webpack 项目名）
vue init webpack project

项目搭建好了，使用webstorm跑一下（如图所示）

本地运行：npm run dev
打包上线：npm run build

build 编译打包平时的配置信息
config 配置信息
dist 打包之后的项目目录
src 项目的源码目录
assets 也可以放资源这里的图片会被变成base64
main.js js的入口文件
xxx.vue 单文件组件模板 js（组件的配置项）样式
static 静态目录访问资源需要用根路径访问 /static/xxx.jpg
index.html 唯一的入口页面

在这里插入图片描述

vue-cli 工程技术集合介绍

vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。
vue-router：vue官方推荐使用的路由框架。
vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些变量和方法。
axios（或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。
vuex：数据共享管理
创建一个emit.js文件，用于vue事件机制的管理。
webpack：模块加载和vue-cli工程打包器。

vue complier 实现

模板解析这种事，本质是将数据转化为一段 html ，最开始出现在后端，经过各种处理吐给前端。
随着各种 mv* 的兴起，模板解析交由前端处理。
总的来说，Vue complier 是将 template 转化成一个 render 字符串。

可以简单理解成以下步骤：

parse 过程，将 template 利用正则转化成 AST 抽象语法树。

optimize过程，标记静态节点，后 diff 过程跳过静态节点，提升性能。

generate 过程，生成 render 字符串

什么是vue-loader?

vue-loader就是一个加载器，把vue组件转换成js模块
为何要转译此模块？

可以动态的渲染一些数据
对三个标签做了优化
template 写虚拟dom
script 写es6语法
style 默认可以用scss语法，提供了作用域
并且开发阶段提供了热加载功能

实现 Vue SSR

其基本实现原理
	app.js 作为客户端与服务端的公用入口，导出 Vue 根实例，供客户端 entry 与服务端 entry 使用。
客户端 entry 主要作用挂载到 DOM 上，服务端 entry 除了创建和返回实例，还进行路由匹配与数据预获取。
	
	webpack 为客服端打包一个 Client Bundle ，为服务端打包一个 Server Bundle 。
	
	服务器接收请求时，会根据 url，加载相应组件，获取和解析异步数据，创建一个读取 Server Bundle 
的 BundleRenderer，然后生成 html 发送给客户端。
	
	客户端混合，客户端收到从服务端传来的 DOM 与自己的生成的 DOM 进行对比，把不相同的 DOM 激活，
使其可以能够响应后续变化，这个过程称为客户端激活 。为确保混合成功，客户端与服务器端需要共享同一套数据
在服务端，可以在渲染之前获取数据，填充到 stroe 里，这样，在客户端挂载到 DOM 之前，可以直接从 store 
里取数据。
首屏的动态数据通过 window.__INITIAL_STATE__ 发送到客户端

	
	Vue SSR 的实现，主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的
	Vue SSR 需要做的事多点（输出完整 HTML），除了 complier -› vnode，还需如数据获取填充至 HTML、
	客户端混合（hydration）、缓存等等。 相比于其他模板引擎（ejs, jade 等），
	最终要实现的目的是一样的，性能上可能要差点

Vue中mixin和mixins的区别

mixin用于全局注册一个混入，如果有公共的组件使用频率很高的话，可以使用mixin很方便的引入公共的部分
mixins选项接受一个混入对象的数组，mixins在引入组件之后，则是将组件内部的内容如data属性，
methods方法与父组件的内容相对应进行合并，可以对父组件的属性进行扩充，
mixins混入的钩子函数会优先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。

为组件样式设置作用域

你不一定要使用 scoped attribute。
设置作用域也可以通过 CSS Modules，
那是一个基于 class 的类似 BEM 的策略\

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
    
    
  border: none;
  border-radius: 2px;
}

.button-close {
    
    
  background-color: red;
}
</style>



<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
    
    
  border: none;
  border-radius: 2px;
}

.buttonClose {
    
    
  background-color: red;
}
</style>



<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
    
    
  border: none;
  border-radius: 2px;
}

.c-Button--close {
    
    
  background-color: red;
}
</style>