一、背景
1.为什么用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>
2.指令简写
（1）v-bind简写为:
<p v-bind:class="[{'is-active':activeClass},errorClass]">message...</p>
<!-- 等价于 -->
<p :class="[{'is-active':activeClass},errorClass]">message...</p>
（2）v-on简写为@
<button v-on:click="delete"></button>
<!-- 等价于 -->
<button @click="delete"></button>
3.组件入门
// demo.vue
<template>
<div>
<img
v-if="false"
src="../../../src/assets/imgs/logo.png"
alt="logo"
>
<v-fence/>
</div>
</template>
<script>
import axios from 'axios' // 引入依赖
import fence from './fence' // 引入组件
export default {
name: "Demo",
components: { // 配置组件
'v-fence': fence
},
props: { // 接收父组件传输的数据
state: {
type: Object,
required: true
}
},
data() {
return {
// 定义数据
}
},
mounted() { // 可简单理解为组件加载后函数调用的位置
this.getStations();
},
methods: {// 定义组建内部方法
// getStations: function () {
// return 'local'
// },
getStations() {
return 'local'
}
}
}
</script>
<style scoped>
@import "../../assets/common.css";
</style>
五、常见问题
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即可进行规范检查，具体的规则文档。
END
