一、与其他框架的比较
Vue是一个“渐进式框架”（The Progressive Framework）
对比Angular
更灵活的适用场景
1、默认API适合纯前端背景的开发者/小块灵场景
2、配合TypeScript也可以适合传统Java后端背景的开发者/大型项目
更低的培训成本，更快的上手速度
底层的Virtual DOM在高级场景下提供更多的灵活性
大型应用中与TypeScript的整个不如Angular，但是在vue3.0会针对性的增强
对比React
对大部分常见场景都提供了事实标准方案
1、不需要额外自行调研选取方案
2、在必要的情况下也可以换用自研方案
模板提供更有好的学习曲线
同事暴露底层Virtual DOM 用于高级场景（也支持JSX）
大型应用中与TypeScript的整个暂时不如React，3.0会针对增强，尤其是TSX
对标React 16+
1、Vue同样可以实现类似于Hooks的逻辑复用机制
2、3.0支持时间分片
与其他所有框架的区别
自带的响应式系统（Reactivity System）
1、类似于MobX，但与框架本身的整合更无缝
2、在复杂组件树中提供比 React 更精确的更新侦测
3、3.0将暴露更多底层响应式API
单文件组件（Single File Components）
1、HTML的自然延伸，符合直觉的代码组织方式
2、完善的工具链
* 预处理支持
* Scoped CSS
* webpack热更新
* IDE支持（VSCode + Vetur）
* Linter支持（eslint-plugin-vue）
二、官方工具链
● 路由：vue-router
● 状态管理：vuex
● 构建工具脚手架：vue-cli
● 开发者工具：vue-devtools
● IDE 支持：VSCode + Vetur
● 静态检查：ESLint + eslint-plugin-vue
● 单元测试：Jest + vue-jest + vue-test-utils
● 文档/静态站生成：VuePress
三、优秀的组件库
● Vuetify
○ 基于 Material Design，功能完整强大，桌面 + 移动
○ 支持 SSR
● Element-UI
○ 知名国产组件库，来自饿了么前端团队
○ 只支持桌面端应用
○ 有现成的控制后台模版
● iView
○ 另一个知名国产库，来自 TalkingData 前端团队
○ 主要支持桌面端，但也有小程序整合
○ 有现成的控制后台模版
● Quasar
○ 不仅仅是组件库的全平台解决方案
○ 桌面端 SPA/SSR + 移动端 PWA / Hybrid + 桌面端 Electron。
四、移动端方案
（H5 / Hybrid)
● Vant
○ 来自有赞的纯移动端 web 组件库
● Vux
○ 基于微信 UI 风格的移动端 web 组件库
● Onsen UI
○ 来自日本，基于 custom elements 支持多个上层框架的 hybrid 移动端方案
● Ionic 4
○ 知名 hybrid 移动端方案，原本只支持 Angular，4.0 开始通过原生 custom elements 支持 Vue
（目前 beta）
一、为什么用vue.js
- mvvm（Model-View-ViewModel）模式框架
- 渐进式框架
- 高效协同开发
2.常见需求及解决方案
需求 解决方案
声明式渲染、组件系统 vue
UI组件 ElementUI
客户端路由 vue-router
大规模状态管理 vuex
构建工具 webpack
项目脚手架 vue-cli
数据持久化 vue-cookie
图表 vue-echarts
百度地图 vue-baidu-map
代码质量检查 eslint-plugin-vue
…
二、开发前准备
1.开发工具
推荐webstorm,或是idea。
注：idea需要安装vuejs的插件。
2.环境搭建
安装node环境。
安装成功后在控制台输入node -V，会展示出版本号。
$ v10.11.0
3.安装依赖
安装需要的依赖文件到node_modules文件夹。
$ npm i
4.项目启动编译及其他操作
以****项目为例。
在项目的package.json文件中配置了项目操作的命令。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js",
"dll": "webpack --config build/webpack.dll.config.js"
},
eg. 启动项目对应命令：
$ npm run dev
三、目录结构
family-doctor-ali项目目录结构。build webpack开发和打包的相关设置config 指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号等相关配置dist 编译结果文件node_modules 依赖包文件src 项目主要代码static 静态文件存放位置test api测试代码/.babelrc babel转换器配置文件/.eslintignore eslint代码检查工具排除文件/.eslintrc eslint代码检查工具配置文件/.gitignore git上传忽略文件/.postcssrc.js css编译工具配置/index.html 入口文件/package.json node项目核心配置/package-lock.json node包版本锁定文件/README.md 项目介绍
四、基本用法
1.常用指令
（1）v-text
html中使用变量。
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>
（2） v-if
<span v-if="isFinal">Nice</span>
判断是否渲染元素。
（3）v-show
判断是否显示元素。
<span v-show="isShow">Oops</span>
（4） v-for
遍历数组来进行渲染。
<div :key='index' v-for="(item,index) in items"></div> <div :key='item.id' v-for="item of items"></div>
（5）v-bind
动态绑定一个或者多个特性。
<p v-bind:class="[{'is-active':activeClass},errorClass]">message...</p>
（6）v-model
双向数据绑定的指令。
<!-- 变量userName -->
<input type="text" v-model="userName">
<span>{{userName}}</span>
（7）v-on
用于监听事件的指令。
<!-- 函数delete --> <button v-on:click="delete"></button>
五、常见问题
1.vue.js能否与jQuery混用？ 可以，但没必要。jquery主要是一个简化dom操作的组件，而在vue项目中你不需要操作dom。 2.vue.js项目中常见技术问题怎么解决？ vue中文文档写的很详细，如果出现文档中没有的问题可以去github中vue项目的Issues中寻找答案。 3.vue.js兼容性如何？ 包括es6+、typescript、sass、less全部支持。vue项目一般使用webpack打包、babel翻译，生成的代码可以适配低版本浏览器。 4.vue.js对于编码规范有什么要求？ 使用eslint代码检查工具，编码结束后使用命令npm run lint即可进行规范检查，具体的规则文档。