4-3

 使用 vue-cli 创建模板项目

说明

1）vue-cli 是 vue 官方提供的脚手架工具

2）github: https://github.com/vuejs/vue-cli

3）作用: 从 https://github.com/vuejs-templates 下载模板项目

创建 vue 项目

npm install -g vue-cli

vue init webpack vue_demo

cd vue_demo

npm install

npm run dev

访问: http://localhost:8080/

模板项目的结构

|-- 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 文件

 打包:

npm run build

发布 1: 使用静态服务器工具包

npm install -g serve

serve dist

访问: http://localhost:5000

 发布 2: 使用动态 web 服务器(tomcat)

修改配置: webpack.prod.conf.js

output: {

publicPath: '/xxx/' //打包文件夹的名称

}

重新打包:

npm run build

修改 dist 文件夹为项目名称: xxx

将 xxx 拷贝到运行的 tomcat 的 webapps 目录下访问: http://localhost:8080/xxx

 说明

1）ESLint 是一个代码规范检查工具

2）它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint 会作出非常有用的提示

3）官网: http://eslint.org/

4）基本已替代以前的 JSLint

ESLint 提供以下支持

1）ES

2）JSX

3）style 检查

4）自定义错误和提示

2.3.3. ESLint 提供以下几种校验

1）语法错误校验

2）不重要或丢失的标点符号，如分号

3）没法运行到的代码块

4）未被使用的参数提醒

5）确保样式的统一规则，如 sass 或者 less

6）检查变量的命名

规则的错误等级有三种

1）0：关闭规则。

2）1：打开规则，并且作为一个警告（信息打印黄色字体）

3）2：打开规则，并且作为一个错误（信息打印红色字体）

 相关配置文件

1）.eslintrc.js : 全局规则配置文件

'rules': {

'no-new': 1

}

2）在 js/vue 文件中修改局部规则

/* eslint-disable no-new */

new Vue({

el: 'body',

components: { App }

})

3）.eslintignore: 指令检查忽略的文件

*.js

*.vue

vue 文件的组成(3 个部分)

1）模板页面

<template>

页面模板

</template>

2）JS 模块对象

<script>

export default {

data() {return {}},

methods: {},

computed: {},

components: {}

}

</script>

3）样式

<style>

样式定义

</style>

基本使用

1）引入组件

2）映射成标签

3）使用组件标签

<template>

<HelloWorld></HelloWorld>

<hello-world></hello-world>

</template>

<script>

import HelloWorld from './components/HelloWorld'

export default {

components: {

HelloWorld

}

}

</script>

关于标签名与标签属性名书写问题

1）写法一：一模一样

2）写法二：大写变小写, 并用-连接

组件间通信基本原则

1）不要在子组件中直接修改父组件的状态数据

2）数据在哪, 更新数据的行为(函数)就应该定义在哪

2.5.2. vue 组件间通信方式

1）props

2）vue 的自定义事件

3）消息订阅与发布(如: pubsub 库)

4）slot

5）vuex

使用组件标签时

<my-component name='tom' :age='3' :set-name='setName'></my-component>

定义 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},

}

 注意

1）此方式用于父组件向子组件传递数据

2）所有标签属性都会成为组件对象的属性, 模板页面可以直接引用

3）问题:

a.如果需要向非子后代传递数据必须多层逐层传递

b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

绑定事件监听

// 方式一：通过 v-on 绑定

@delete_todo="deleteTodo"

// 方式二：通过 $on()

this.$refs.xxx.$on('delete_todo', function (todo) {

this.deleteTodo(todo)

})

触发事件

// 触发事件(只能在父组件中接收)

this.$emit(eventName, data)

注意:

1）此方式只用于子组件向父组件发送消息(数据)

2）问题: 隔代组件或兄弟组件间通信此种方式不合适

2.8. 组件间通信 3: 消息订阅与发布(PubSubJS 库)

 订阅消息

PubSub.subscribe('msg', function(msg, data){})

发布消息

PubSub.publish('msg', data)

注意

优点: 此方式可实现任意关系组件间通信(数据)

2.8.4. 事件的 2 个重要操作(总结)

1）绑定事件监听 (订阅消息)

目标: 标签元素 <button>

事件名(类型): click/focus

回调函数: function(event){}

2）触发事件 (发布消息)

DOM 事件: 用户在浏览器上对应的界面上做对应的操作

自定义: 编码手动触发

组件间通信 4: slot

理解

此方式用于父组件向子组件传递`标签数据`

子组件: Child.vue

<template>

<div>

<slot name="xxx">不确定的标签结构 1</slot>

<div>组件确定的标签结构</div>

<slot name="yyy">不确定的标签结构 2</slot>

</div>

</template>

父组件: Parent.vue

<child>

<div slot="xxx">xxx 对应的标签结构</div>

<div slot="yyy">yyyy 对应的标签结构</div>

</child>