VUE入门-从实战中提炼

vue这门技术已出现几年了，一直没有真正地进行项目实战，所以最近接了个实际项目(vue+elementUi+Echarts )，拿来边研究边实际操作

一、简介
Vue 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能地驱动复杂的单页应用。

二、能干什么
Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。
WebApp等

三、优缺点：
1、优点
轻量级的框架
双向数据绑定
组件化开发
单页面路由
学习成本低
虚拟dom
渐进式框架
数据和结构的分离
运行速度快
插件化
2、缺点
不支持IE8以下
社区可能没有Angular和React那么丰富
Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍
因为是单页面应用，不利于seo优化
初次加载时耗时多

注：vue3已不支持IE，vue2可以

四、基础
需要了解：
1，Nodejs ：基于Chrome V8引擎的JavaScript运行环境，让JavaScript运行在服务端的开发平台。类似java的运行环境。
2，V8引擎 ：是JavaScript运行的解释器，作为chrome浏览器的js执行解释器。
3，Express.js ：是一个简单灵活的node.js web应用框架，提供了一些列强大的特性创建个中web应用
4，npm ：js的包管理器(Node Package Manager),类似java中的maven，gradle
5，ajax  ： 多用于jquery项目，不介绍
6，axios ：用于浏览器和node.js的基于Promise的HTTP客户端，基于ajax封装,为MVVM框架而生 (vue )
7，fetch ：是ajax在ES6的替代品，是原生js封装的
8，ES6 ：ECMAScript6是JavaScript语言的国际标准
9，Promise ：是异步编程的一种解决方案，比传统的解决方案callback更加的优雅
10，vue.js ：一套响应式的 JavaScript 开发库，其他前端开发库也有很多，比如 jQuery、ExtJS、Angular 等
11，Vue-router  ：是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用（SAP）
12，SPA ：一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面
13，Webpack ：Webpack是一个前端打包和构建工具
需要熟练：
HTML、CSS、Javascript（js）、ES6、ES5

五、综合知识点
1、环境搭建及配置
安装Node.js 前端工程化项目运行的基础环境

2、安装vue创建
vue2.0创建命令
1). 全局安装vue：npm i -g vue
2). 全局安装vue-cli(2.0)：npm i -g vue-cli
3). 全局安装webpack: npm i webpack -g
4). 创建项目：vue init webpack 项目名称
5). 运行项目：npm run dev
6). 打包项目：npm run build
注：vue2或3差不多

3、目录结构及文件作用
├── build              构建脚本目录
│  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
│  ├── build.js            生产环境构建脚本
│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│  ├── dev-server.js          运行本地开发服务器
│  ├── utils.js            构建相关工具方法
│  ├── webpack.base.conf.js      wabpack基础配置
│  ├── webpack.dev.conf.js       wabpack开发环境配置
│  └── webpack.prod.conf.js      wabpack生产环境配置
├── config             项目配置
│  ├── dev.env.js           开发环境变量
│  ├── index.js            项目配置文件
│  ├── prod.env.js           生产环境变量
│  └── test.env.js           测试环境变量
├── dist 打包生成的文件
├── node_modules 环境依赖的包
├── src               源码目录  
│  ├── main.js             入口js文件
│  ├── app.vue             根组件
│  ├── components           公共组件目录
│  │  └── title.vue
│  ├── assets             资源目录，这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              应用级数据（state）
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
├── static             纯静态资源，不会被wabpack构建。
└── test              测试文件目录（unit&e2e）
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js
├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── README.md            项目介绍
├── index.html           入口页面

4、运行及打包
到所在目录中操作
运行项目：npm run serve
项目打包：npm run build

5、深刻理解生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
1)、创建前/后(beforeCreate / created):
在beforeCreate阶段 ，vue实例的挂载元素el和数据对象data都为undefined ，还未初始化 ，也就是说此时我们还拿不到数据
在created阶段 ，vue实例的数据对象data有了 ，但是实例对象el还没有 ，也就是说可以拿到数据 ，但是无法获取Dom节点 ，此时data 和 methods已经可以使用 但是页面还没有渲染出来
2)、载入前/后 （beforeMount / mounted）：
在beforeMount阶段 ，vue实例的$el和data都初始化了 ，但还是挂载之前的虚拟DOM节点 ，此时实例尚未挂载完成 ，此时页面上还看不到真实数据 只是一个模板页面而已
在mounted阶段 ，vue实例挂载完成 ，页面成功渲染数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
上面四个钩子函数都是在Vue生命周期过程中自动调用
3)、更新前/后 （beforeUpdate / updated）：
在beforeUpdate 阶段 ，数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
在updated阶段 ，由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
只有在数据改变后才调用
4)、销毁前/后 （beforeDestroy / destroyed）
beforeDestroy在实例销毁之前调用 ，在这一步，实例仍然完全可用。
destroyed 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
5)、页面第一次加载只会调用触发 beforeCreate created beforeMount mounted这几个钩子函数
每个阶段对应的钩子函数 ，我们都可以在其内部做一些对应的逻辑
6)、函数适合哪些运用场景
beforeCreate 此时页面开始创建 ，可以加loading……事件 ，加载实列时触发
created 数据 一些异步请求的调用 ，loading……事件结束等
mounted 获取Dom节点操作DOM ，在这个钩子函数里面我们可以使用一些第三方的插件实例写在这个函数内
updated 做一些数据统一更新处理的相应函数

 6、常用
***重点要掌握组件，页面大多用到***
1、src->main.js：
//可引用node_moudles包中的类
import 名称 from 某类
Vue.use(名称)

//引用样式
import 样式

//定义全局
import A from JS文件
Vue.prototype.B = A

2、src->App.vue
根组件，设置全局引用如样式，皮肤样式等

3、src->views 创建的页面写在这里

4、src->router ***路由***
export default new Router({
  routes: [
    {
      path: '路径',
      name: '名称',
      component: 组件名称
    }
  ]
})
5、src->components
export default中一定要给组件name命名，否则其它页面不能引用（引用的是组件，不是文件名）
    
6、常用命令
1).v-bind = : (简写) 如 v-bind:href = :href
2).v-on = @ 如 v-on:click="dosomeing" = @click("dosomeing")
3).v-model 数据双向绑定 针对表单控件
4).v-for 循环
5).v-if 判断 如v-if="show!=show"
6).html标签绑定值：{{xxxx}}
7).在JS中
name:'一定要写名称',
data:{
    return{
    //初始值
    }
},
mounted(){
    //浏览器加载执行
}, 
methods:{
    //不带缓存 不能在这里声名变量，只能写方法
   dosomeing(),... //多个方法间用逗号分开，不用分号
},
computed:{
     //计算方法 多属性 多方法---带缓存 可少用
},
watch:{
    //监听
},
components: {
    //声明引用的组件
}
8).注意当前内部调用时,this
9).变量与字符串拼接 注意小标点 如下例
<img :src="`/static/images/icon/${skin}.png`" id="skinpic" alt="" />
10).style中的scoped 只针对当前页面样式有效
11).父组件与子组件相互调用方法
子控件方法中this.$emit('父方法',传递的值)
父控件：
html中 <控件名称 ref="myComponet"></控件名称>
js中引用子控件
import 控件名称 from 路径;
//执行子组件
this.$refs.myComponet.子组件方法

其它：
使用elementUi
1、安装
npm i element-ui -S
也可直接引用JS （略）
2、配置
在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

开发工具：HbuilderX