入门vue

一、与其他框架的比较
.......................已删

一、为什么用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即可进行规范检查，具体的规则文档。