vue项目中需掌握技术

1、vue框架的初步学习：
(1)介绍：
是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，Vue 可用于构建单页面应用项目。

(2)安装使用：
标签引用对应的cdn链接

    基于脚手架去构建vue项目：

           终端全局下载脚手架：sudo  npm install  -g vue-cli

           生成自己的项目： vue init webpack(或者webpack-simple)  demo (自己起的项目名)         ⚠️想要项目在哪个位置，提前访问进入到文件夹

           给项目安装依赖：npm install     ⚠️进入到项目文件夹的根目录安装依赖

           跑项目：npm run dev

(3)特点：
响应式编程（以数据为驱动，很容易在编程中表现静态或动态的数据流，例如事件）、组件化。

(4)优势：
轻量级框架、简单易学

      双向数据绑定（View的变动，自动反映在 ViewModel）

      组件化

      数据和结构的分离

      虚拟DOM

      运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。

2、交互Axios：
(1)介绍：
是Vue插件能够支持发起异步数据传输和接口交互，是一个基于promise的http库，用于前后端交互。

(2)安装使用：
下载：npm install --save axios

             引入：main.js中引入使用     import axios from 'axios' ；   Vue.prototype.axios = axios;

(3)项目中使用注意事项：
项目中对请求的url进行了封装 ，使用axios.create()自定义设置配置，将公共地址进行了封装，在开发时直接去掉前面chenlie/api基础地址

              容易出错的地方：

           axios.get('/user', { params: {ID: 12345} })  注意传参的格式是对象中传入参数对象

           axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' })  第二参，直接是对象参数

       ⚠️总结wiki:赵雪华-axios

3、路由Router:
(1)介绍：
vue的核心插件，主要用于实现页面的跳转功能，让构建单页面应用变得简单。

(2)安装使用：
下载：npm install vue-router

    引入：main.js中引入使用     import Router  from 'vue-router' ；   Vue.use(Router)

(3)注意事项：
在模块化项目中，注意手动引入路由功能，通过 Vue.use() 明确地安装路由功能。

     项目中一般将路由注入到根实例让所有的组件可用（一般用于给组件配置路由），项目中路由的配置整体在文件夹router中，使用命名路由，在调用时直接使用命名路由的方式传参调用即可。

4、集中式数据管理Vuex
(1)介绍：
vue的核心插件，主要用于集中式管理数据，类似全局对象，所有组件都可以使用它中的数据。一般在构建大型应用中使用，将项目中组件共享的状态抽取出来，核心是store仓库，包含应用的state。

(2)安装使用：
下载：npm install vuex

    引入：main.js中引入使用     import Vuex  from 'vuex' ；   Vue.use( Vuex)

(3)特点：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件会更新。

   不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

(4)特点：
Vuex提供数据（state），来驱动视图（Vue组件），视图通过Dispatch触发Action，在Action中可以进一步做一些异步的操作（例如通过ajax请求后端的接口数据或者通过axios），再通过Commit提交给Mutations，

由Mutations去最终更改state，即会使视图发生变化。

(5)注意事项：
在模块化项目中，注意手动引入路由功能，通过 Vue.use() 明确地安装路由功能。

     项目中一般将数据管理注入到根组件让所有的组件可用，项目中路由的配置整体在文件夹store中。

5、es6
(1)介绍：
新的javaScript语言标准,规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象,在原有es5上做了延伸和拓展，使js可以用来编写复杂的大型应用程序。

(2)内容总结：

6、异步逻辑的使用
(1)定时器setTimeout
(2)Promise
(3)async/await
链接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33

               https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/156
               https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7

7、Moment:
(1)介绍：
Moment.js基于js的日期处理类库（原生中一直用Date构造函数和实例方法来获取日期时间）

(2)安装使用：
npm install moment

        配置在main.js入口文件（用时直接可用）或者package.json中（即全局的，用时import导入）

(3)总结：

8、Ramda:
(1)介绍：
Ramda基于js的函数式编程库 函数式编程风格、自动柯里化、要操作的参数一般在最后 理念是"function first，data last"

柯里化:是把接受多个参数的函数变换成接受一个单一参数的函数，返回接受剩余参数的函数，并且返回结果值

(2)安装使用：
下载：npm install ramda

    引入：main.js中引入使用   import ramda  from ' ramda' 

 ⚠️一般在项目中package.json中配置，在哪使用需引入，如果在main.js中主入口引入，则项目中可直接使用。

(3)总结

9、项目中引入的组件库ElementUI
(1)介绍：
一套为开发者、设计师和产品经理准备的基于Vue 2.0 的桌面端组件库。每个组件封装了布局样式等，供使用者直接引入使用。

(1)安装使用：
下载：npm install element-ui

 引入：main.js中引入使用     import ElementUI  from 'element-ui' ；   Vue.use( ElementUI)

⚠️根据项目需要可按需引入或全局引入 链接：https://element.eleme.cn/#/zh-CN/component/installation

10、jsPlumb 用于绘制图表的Web应用程序，由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表的
https://wdd.js.org/jsplumb-chinese-tutorial/#/?id=_11-%e4%bb%80%e4%b9%88%e6%98%afjsplumb%ef%bc%9f

(1)注意点：
总结wiki:在关于web项目模块的每篇文档中有总结项目具体某模块使用了哪些组件，以及介绍主要的属性和方法。