2.1. 使用 vue-cli 创建模板项目
2.1.1. 说明
1）vue-cli 是 vue 官方提供的脚手架工具
2）github: https://github.com/vuejs/vue-cli
3）作用: 从 https://github.com/vuejs-templates 下载模板项目
2.1.2. 创建 vue 项目
npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
2.1.3. 模板项目的结构
|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件
2.2. 项目的打包与发布
2.2.1. 打包:
npm run build
2.2.2. 发布 1: 使用静态服务器工具包
npm install -g serve
serve dist
访问: http://localhost:5000
2.2.3. 发布 2: 使用动态 web 服务器(tomcat)
修改配置: webpack.prod.conf.js
output: {
publicPath: '/xxx/' //打包文件夹的名称
}
重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下访问: http://localhost:8080/xxx
2.3. ESLint
2.3.1. 说明
1）ESLint 是一个代码规范检查工具
2）它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示
3）官网: http://eslint.org/
4）基本已替代以前的 JSLint
2.3.2. ESLint 提供以下支持
1）ES
2）JSX
3）style 检查
4）自定义错误和提示
2.3.3. ESLint 提供以下几种校验
1）语法错误校验
2）不重要或丢失的标点符号，如分号
3）没法运行到的代码块
4）未被使用的参数提醒
5）确保样式的统一规则，如 sass 或者 less
6）检查变量的命名
2.3.4. 规则的错误等级有三种
1）0：关闭规则。
2）1：打开规则，并且作为一个警告（信息打印黄色字体）
3）2：打开规则，并且作为一个错误（信息打印红色字体）
2.3.5. 相关配置文件
1）.eslintrc.js : 全局规则配置文件
'rules': {
'no-new': 1
}
2）在 js/vue 文件中修改局部规则
/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App }
})
3）.eslintignore: 指令检查忽略的文件
*.js
*.vue
2.4. 组件定义与使用
2.4.1. vue 文件的组成(3 个部分)
1）模板页面
<template>
页面模板
</template>
2）JS 模块对象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3）样式
<style>
样式定义
</style>
2.4.2. 基本使用
1）引入组件
2）映射成标签
3）使用组件标签
<template>
<HelloWorld></HelloWorld>
<hello-world></hello-world>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
</script>
2.4.3. 关于标签名与标签属性名书写问题
1）写法一：一模一样
2）写法二：大写变小写, 并用-连接
2.5. 组件间通信
2.5.1. 组件间通信基本原则
1）不要在子组件中直接修改父组件的状态数据
2）数据在哪, 更新数据的行为(函数)就应该定义在哪
2.5.2. vue 组件间通信方式
1）props
2）vue 的自定义事件
3）消息订阅与发布(如: pubsub 库)
4）slot
5）vuex
2.6. 组件间通信 1: props
2.6.1. 使用组件标签时
<my-component name='tom' :age='3' :set-name='setName'></my-component>
2.6.2. 定义 MyComponent 时
1）在组件内声明所有的 props
2）方式一: 只指定名称
props: ['name', 'age', 'setName']
3）方式二: 指定名称和类型
props: {
name: String, age: Number,
setNmae: Function
}
4）方式三: 指定名称/类型/必要性/默认值
props: {
name: {type: String, required: true, default:xxx},
}
2.6.3. 注意
1）此方式用于父组件向子组件传递数据
2）所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3）问题:
a.如果需要向非子后代传递数据必须多层逐层传递
b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
2.7. 组件间通信 2: vue 自定义事件
2.7.1. 绑定事件监听
// 方式一：通过 v-on 绑定
@delete_todo="deleteTodo"
// 方式二：通过 $on()
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})
2.7.2. 触发事件
// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)
2.7.3. 注意:
1）此方式只用于子组件向父组件发送消息(数据)
2）问题: 隔代组件或兄弟组件间通信此种方式不合适
2.8. 组件间通信 3: 消息订阅与发布(PubSubJS 库)
2.8.1. 订阅消息
PubSub.subscribe('msg', function(msg, data){})
2.8.2. 发布消息
PubSub.publish('msg', data)
2.8.3. 注意
优点: 此方式可实现任意关系组件间通信(数据)
2.8.4. 事件的 2 个重要操作(总结)
1）绑定事件监听 (订阅消息)
目标: 标签元素 <button>
事件名(类型): click/focus
回调函数: function(event){}
2）触发事件 (发布消息)
DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发
2.9. 组件间通信 4: slot
2.9.1. 理解
此方式用于父组件向子组件传递`标签数据`
2.9.2. 子组件: Child.vue
<template>
<div>
<slot name="xxx">不确定的标签结构 1</slot>
<div>组件确定的标签结构</div>
<slot name="yyy">不确定的标签结构 2</slot>
</div>
</template>
2.9.3. 父组件: Parent.vue
<child>
<div slot="xxx">xxx 对应的标签结构</div>
<div slot="yyy">yyyy 对应的标签结构</div>
</child>
网友评论