入门vue

一、与其他框架的比较
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即可进行规范检查，具体的规则文档。

入门vue

原文：https://www.cnblogs.com/randon/p/11717672.html