vue入门第一次写长篇文章，也是时间比较紧迫的时候开始写的，有什么不足或者加强的地方希望各位大神能指正。学习了很长一段

第一次写长篇文章，也是时间比较紧迫的时候开始写的，有什么不足或者加强的地方希望各位大神能指正。

学习了很长一段时间，以为自己准备的足够充分，只有等真正实践的时候才会发现自己的不足。不过没关系，不断发现不足，完善自身，才能真正的实现自我。我目前正在完善自己的不足，正在向一个正儿八经的前端工程师靠拢，由一位大神带着做项目，这跟自己平时学习和自己做项目的认知和经验还有方法都有很大差距。尤其是今天跟着大神看了一个ui库团队的视频和app后，虽然有很多专业术语和技术不明白，但最起码我知道身为一个合格的前端工程师需要具备什么样的能力了，应该一些什么。那么我就分享一些我在项目实践过程中的一些经验和自己对vue的一些认识，还有做项目要用到什么的分享。

vue的认识

我在这里直说一些我的看法和理解。 vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。要用vue首先最起码你得会HTML,CSS,JavaScript，这都是基础。特点是虚拟dom vue数据更新会重新渲染页面，单只是更新的重新渲染，不会整个页面都重新渲染。

为什么会用到框架，首先它肯定比自己写一个html页面一个一个的写方便的多，它为开发者节省很多时间，和提供了很多方便。它一个页面可以同时做三件事情（HTML,CSS,JavaScript）。

什么是vue

是一套用于构建用户界面的渐进式框架，而渐进式则表示使用vue框架的时候，可以自由选择使用，而不是强制使用所有特性

vue的特点

核心只关注视图（view）易学，轻量，灵活适用于移动端项目渐进式框架

渐进式框架的理解

  1.声明式渲染
  2.组件系统
  3.客户端路由 vue-router
  4.大规模状态管理 vuex
  5.构建工具 vue-cli

vue的两个核心点

  1.响应的数据变化
        当数据发生变化----视图自动更新
  2.组合的视图组件
        UI页面映射为组件树
        划分组件可维护、可复用、可测试

MVVM

  M:model 数据模型
  V:view  视图模板
  VM:view-model  视图模型

{{}} 小胡子语法：取值、赋值、三元表单元素 input checkbox textarea radio select directive 指令，DOM上的行间属性等等

脚手架搭建

依赖工具

首先得配置node环境和npm包管理工具npm

脚手架

快速构建前段项目的一个工具和平台

安装命令

npm i -g @cli/vue  //全局安装@cli/vue
npm i -g yarn  //也可以yarn下载  首先先安装yarn
yarn global add @cli/vue

vue create 项目名   //构建项目
npm run serve   //启动项目
yarn serve   //用yarn启动

常用命令

生成package.json文件  npm init  (手动配置)
                      npm init -y (默认)
一键安装package.json文件里面的依赖包  npm i   /  yarn
等等

ref

作用在组件上绑定的是组件实例，作用在dom元素上绑定的是dom元素，可以通过$refs去访问到

vue生命周期

就是一个组件从创建到销毁的过程中做了很多事务，然后在不同类型的事务执行执行后添加的回调函数，让使用可以在不同位置做不同自定义事务

在vue分为了数据初始化，dom初始化挂载，更新，销毁，缓存

beforeCreate:创建之前关于vue的无法使用

created：请求接口

beforeMount：挂载之前

mounted：挂载成功，可以操作dom

beforeUpdate：页面更新之前

updated：页面更新完成

beforeDestroy：销毁之前，数据还可以用

destroyed：销毁成功

components：接收子组件（定义组件）

methods：存放方法

data：存放数据（状态）

props：接收参数

watch：监听

vue中常用的指令

变量：响应式，双向绑定，数据改变，改变页面

指令：标签上使用v- 指令里可以使用vue变量

v-html：双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html
指令。它等同于JS的innerHtml属性。

v-text：主要用来更新textContent，可以等同于JS的text属性。

v-if：可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

v-else-if：充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

v-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。  

v-show：也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁
，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

v-for：循环，用于数据渲染

v-bind：绑定属性  可以简写成：

v-on：绑定事件  可以简写成@

v-model：监听，双向绑定，绑定表单

v-slot：占位、替换、插槽

指令大全有代码：www.jianshu.com/p/c4a87e1b4…

vue中路由跳转

router-link

跳转标签  默认是a标签 可以通过tag属性切换标签 
必须写to属性 不然会报错 也就是去哪个页面的意思
active-class属性 如果页面跳转按钮想要做高亮显示可以用这个属性 点谁谁高亮

router-view

负责展示跳转后的页面

跳转方法

this.$router.push("路径")
this.$router.replace("路径")这个事替换  将不会存在历史记录

组件库

为了节省前端工程师的开发时间，也是为了不用重复去写经常要用到的表单之类需要重复写样式和方法，有了组件库。也为了更好的视觉规范。一些好的ui库，比如element.ui 适用于pc端。vux、vant适用于手机端。都有官网可以看。

vue中创建组件的方式

1，全局组件使用Vue.component’

语法：Vue.component('name', 选项)
一般用来创建全局组件

2，选项：components

语法： 
components: {
  name: 选项
}

3，扩展子类Vue.extend()需要手动实例化

const ComponentClass = Vue.extend(选项)
new ComponentClass(选项参数)

new Vue(选项)做了什么

1，执行init方法
2，选项资源合并
3，执行beforeCreate
4，数据初始化工作
5，执行created
6，判断是否有el属性，如果有自动执行$mount如果没有就不在执行了

组件中的数据选项

data

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data
的属性能够响应数据变化。
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理
实例创建之后，可以通过 vm.data.a。
在组件中data的值是一个function返回一个对象,因为组件可能被用来创建多个实例。如果 data 
仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data
函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对
象。

props

用来接受副组件传递的数据

/// 传递
<Component :aaa="aaa">
new Component({
  propsData: {
    aaa: 'aaa'
  }
})

// 接收
{
  props: ['aaa'],
  props: {
    aaa: {
      type: String,
      default: ''
    }
  }
}

computed

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。 computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

vuex 数据仓库

vuex为方便所有页面使用和操作数据提供方便。

三个方法：
state：存放公用数据，存多个页面或组件使用的数据。
mutations：修改state里面数据的唯一的方法，通过commit出发
actions：处理异步数据  通过dispatch触发

vuex实践：www.jianshu.com/p/9f375f351…

插件

插件是用来扩展Vue全局的一种实现方式，vue生态中很多都是以插件的形式存在，可以理解插件为一个包，这个包是一组相关的内容 vue-router:

router 组件的导航守卫 vuex $store 插件需要注册才能使用 Vue.use(插件对象, 传递给插件的参数)用来注册插件而Vue.use会自动执行，插件对象中的install方法，并且传递Vue类，和自定义参数

const pluginsObj = {
  install (Vue, options) {
    // 各种vue的全局扩展
    Vue.proptotype.axx = {}
    Vue.component()
    Vue.filter()
    ...
  }
}
Vue.use(pluginsObj, 'aaaa')

自定义插件

1，对象中有install方法
const pluginsObj = {
    install (Vue, options) {
        // 各种vue的全局扩展
        Vue.proptotype.axx = {}
        Vue.component()
        Vue.filter()
        ...
    }
}
2，直接就是一个函数
    export default (Vue, options) {
        // 各种vue的全局扩展
        Vue.proptotype.axx = {}
        Vue.component()
        Vue.filter()
        ...
}

vue项目目录规范

├── README.md            项目介绍
├── index.html           入口页面
├── 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           测试环境变量
├── mock              mock数据目录
│  └── hello.js
├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src               源码目录  
│  ├── main.js             入口js文件
│  ├── app.vue             根组件
│  ├── components           公共组件目录
│  │  └── title.vue
│  ├── assets             资源目录，这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              应用级数据（state）
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
│    └── notfound.vue
├── static             纯静态资源，不会被wabpack构建。
└── test              测试文件目录（unit&e2e）
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js

项目经验

下面分享分享开发一个vue项目的经验。

项目分析

1、首先要做的就是项目分析，开始一个项目的时候首先要想它是pc端还是手机端的。拿我现在做的手机端的做个例子吧。

2、第二部就是考虑适配问题。因为手机屏幕尺寸的不同，分辨率的不同，这事一个必须考虑在前面的问题。不然没法布局。适配（scss）：单位单位使用rem作为适配器单位，通过js按照屏幕比例动态修改html font-size的大小，达到页面rem值得适配，涉及px和rem的转换，手动转换过于繁琐，所以引入自动转化插件pxto2rem，自动将px转成rem，达到单位适配的效果 vw、vh为百分比的替换单位，用来开发整个屏幕

布局：布局使用flex布局，进行页面布局的适配

3、项目架构项目架构的意义：以更少的代码维护更多的代码模块，项目的后期维护，版本的更新迭代更加方便，并且有效的提升开发效率要考虑的问题：自动化还是工程化什么是自动化：webpack，gulp 工程化：项目的目录结构、公共组件、全局配置规范：编码规范、命名规范、ui视觉规范开发约定

全局组件组件设计的第一步就是考虑组件类型（展示组件，业务组件，容器组件）考虑组件用例（组件我该怎么去用）设计用列主要就是设计、组件的调用方式（组件，api）属性、事件、子元素 slot、方法扩展的方法抛出的接口

4、组件通讯定义：组件通信就是两个或者两个以上组件数据的项目传递，成为组件通信，而组件通信场景（父子，子父，同级，跨级），不同的场景有不同的组件通讯方法

父子：props传递，子组件通过￥paren获取父组件实例拿到数据，推荐使用props

子父：（父组件使用子组件的数据）

1、自定义事件，子组件中处罚事件传递数据
2、$children获取子组件实例
3、$refs获取子组件实例

同级别：

1、状态提升至同级组件共同的父组件上
2、自定义事件，一个组件中定义事件，一个组件中触发事件

跨级：

1、provide、inject
2、vuex
3、自定义事件

vuex可以实现所有场景的组件通讯，通讯方法有很多，而在实际场景中我们只选择一种最适合的使用

组件的开发

1、设计组件用例需要考虑的东西
用法
属性
事件
子元素
方法

1、常规组件
2、组合组件（两个或两个以上组件一起使用的组件）

5、页面分布、路由

哪个页面展示什么内容，需要什么功能

就先写到这里吧！有什么问题欢迎各位指点。