B062-组件路由属性扩展 webpack Vue-cli

- - 一：组件
  - - 1.何为组件
    - 2.组件的定义方式
    - - 全局组件
      - 局部组件
    - 3.组件的注意事项
    - 4.template的定义方式
    - 5.组件获取数据的方式
  - 二：路由
  - - 1.什么是路由？
    - 2.路由的使用步骤
  - 三：Vue属性扩展
  - - 1.计算属性 computed和监听属性 watch
    - 3.钩子函数 mounted(){} 页面加载完成触发
  - 四：webpack打包
  - - 作用：
    - 安装
    - 打包js和css
    - 如果是打包css
    - 使用webpack运行项目（重要）
  - 五：Vue-cli 脚手架必须搞定
  - - 搭建脚手架
    - 脚手架运行流程

创建staticsWeb项目
1.初始化npm环境		  			npm init-y			->生成package.json文件		->相当于maven的pom.xml
2.基于npm本项目安装vue	    npm install/i vue		->生成一个node_modules		->相当于maven的本地仓库

引入vue核心文件
定义挂载节点
初始化实例对象

一：组件

1.何为组件

在这里插入图片描述

2.组件的定义方式

全局组件

     定义全局组件语法:
           Vue.component("组件名",{
                template:"<h1>我是全局组件的组件内容</h1>"
            });
     注意：全局组件，所有的Vue实例都可以使用

1.定义标签元素
2.初始化实例对象挂载到节点
3.在挂载实例外部定义全局组件
4.在标签元素使用组件

<head>
    <meta charset="UTF-8">
    <title>Title</title>						<!--↓引入核心Vuejs-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
  <outcomponent></outcomponent>					<!--在有挂载实例的地方使用自定义的全局组件-->
</div>
</body>
<script type="text/javascript">
    
    Vue.component("outcomponent",{				//在挂载实例外部定义全局组件
        template:"<div>我是全局组件的组件内容</div>"
    });
    
    new Vue({
        el:"#app"								//挂载dom节点
    });
</script>

局部组件

     定义局部组件语法:
           new Vue({
                el:"#app",          // 挂载dom节点
                components:{        // 申明局部组件
                    "组件名":{
                        template:"<h1>我是局部组件的组件内容</h1>"
                    }
                }
            });
     注意：只能在当前Vue实例使用

1.定义标签元素
2.初始化实例对象挂载节点
3.在挂载实例内部申明局部组件
4.在标签元素使用组件

<head>
    <meta charset="UTF-8">
    <title>Title</title>							<!--↓引入核心Vuejs-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <innercomponent></innercomponent>				<!--在有挂载实例的地方使用自定义的局部组件-->
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",									// 挂载dom节点
        components:{								// 在挂载实例内部申明局部组件
            "innercomponent":{
                template:"<h1>我是局部组件的组件内容</h1>"
            }
        }
    });
</script>

3.组件的注意事项

组件的命名方式
A 如果我们使用驼峰命名OutComponent 使用的时候只能—out-component
B 可以使用 out-component
C 推荐使用全小写outcomponent

template定义需要小心：有且只有一个根元素

template:"<div><h1>我是1</h1><h1>我是2</h1></div>"

4.template的定义方式

1.直接写不推荐使用: 1 写代码没有任何提示 2 格式全手动自己调整 3 代码混乱不好理解

<body>
<div id="app">
    <outcomponent></outcomponent>
</div>
</body>
<script type="text/javascript">
    
    Vue.component("outcomponent",{
        template:"<div><h1>我是全局组件</h1></div>"
    });

    new Vue({
        el:"#app"
    });
</script>

2.使用HTML提供的< template >标签推荐使用

<body>
<div id="app">
    <outcomponent></outcomponent>
</div>
<template id="myForm">
    <form action="">
        用户名：<input type="text" />
        密码：<input type="password" />
        <button type="submit"/>
    </form>
</template>
</body>
<script type="text/javascript">
    
    Vue.component("outcomponent",{
        template:"#myForm"
    });

    new Vue({
        el:"#app"
    });
</script>

注意：可以直接将< template > 定义到挂载的dom节点内部，那么会直接生效

3.使用< script type=“text/template” > 也不推荐使用

<body>
<div id="app">
    <outcomponent></outcomponent>
</div>
<script type="text/template" id="mytemplate">
    <div>
        <form action="">
            用户名：<input type="text" />
            密码：<input type="password" />
            <button type="submit"/>
        </form>
        <div>我会生效吗？？？</div>
    </div>
</script>
</body>
<script type="text/javascript">
    
    Vue.component("outcomponent",{
        template:"#mytemplate"
    });
    new Vue({
        el:"#app"
    });
</script>

5.组件获取数据的方式

想在组件内部获取数据，那么数据一定要定义在组件内部，而且格式有要求：
必须是一个data(){}
在函数内部，必须返回一个return {属性名：属性值}，使用函数的方式返回一个对象

<body>
<div id="app">	
    <outcomponent></outcomponent>					<!--使用自定义的组件-->
    {{info}}
</div>
<template id="myForm">								<!--模板标签-->
    <form action="">
        用户名：<input type="text" />
        密码：<input type="password" />
        <button type="submit"/>
        {{info}}									<!--在组件中除了{{}}  也可以用指令取值-->
    </form>
</template>
</body>
<script type="text/javascript">
    Vue.component("outcomponent",{					//定义组件
        template:"#myForm",
        data(){										//一定要将数据定义到组件内部
            return {
              info:"我能娶到你吗？？",				   //属性名：属性值
              name:"xxx",
              age:"23",
              sex:"男"
            }
        }
    });
    new Vue({        
        el:"#app",									//挂载dom节点
        data:{
            info:"我能娶到你吗？？2"
        }
    });
</script>

两个data的区别：
vue实例对象的data是vue实例对象的一个属性，而这里的data是自定义模板的函数

二：路由

1.什么是路由？

是将浏览器请求映射到组件的技术(vue-router插件)

2.路由的使用步骤

A.安装路由
npm install vue-router
B.在页面中引入路由

 <script src="node_modules/vue-router/dist/vue-router.js"

C.编写路由使用流程代码

 1 定义组件													component
 2 定义VueRouter实例对象									router	VueRouter	routes	
 3 在对象中配置路由映射规则						    	 	routes	path	component	地址映射到组件
 4 将VueRouter实例交给vue实例管理	 			  			router	交给vue池管理	挂载dom节点

 5 定义跳转的超链接				 						    < router-link to="/xxx" >go to xxx< /router-link > 
 6 申明最终组件渲染位置							 			< router-view >< /router-view >

5-4-2-3-1-6		超链接-vue-VueRouter-映射规则-组件-渲染位置			组件-映射规则-VueRouter-Vue  超链接-渲染位置

<head>
    <meta charset="UTF-8">
    <title>Title</title>						  	<!--引入核心Vuejs-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>										  						<!--↑引入vue-router 注意：必须放到Vue下面-->
</head>
<body>
<div id="app">
    <router-link to="/index">首页</router-link>		<!--5.定义超链接  跳转到路由规则-->
    <router-link to="/order">订单</router-link>
    <router-link to="/info">关于我们</router-link>
    <router-view></router-view>					 	 <!--6.定义路由匹配的组件显示位置-->
</div>
</body>
<script type="text/javascript">
    let INDEX =  Vue.component("index",{		  	//1.定义组件
        template:"<h1>首页</h1>"
    });
    let ORDER =  Vue.component("order",{
        template:"<h1>订单</h1>"
    });
    let INFO =  Vue.component("info",{
        template:"<h1>关于我们</h1>"
    });

    let router = new VueRouter({					//2/3.定义vue-router实例
        routes:[									//3/2.配置映射规则
            {path:"/index",component:INDEX},
            {path:"/order",component:ORDER},
            {path:"/info",component:INFO}
        ]
    });

    new Vue({
        el:"#app",									
        router  									//4.告诉Vue要使用路由,变量名和属性名相同时可以简写即只写属性名
    });
</script>

三：Vue属性扩展

1.计算属性 computed和监听属性 watch

<div id="app">
    {{new Date(birthday).getFullYear() +"年" + new Date(birthday).getMonth()+"月" }}<br>
    {{birth}}<br>
    <input type="text" v-model="msg"/>
</div>
</body>
<script type="text/javascript">
    new Vue({
        /*挂载dom节点*/
        el:"#app",
        data:{
            birthday:1529032123201, // 毫秒值
            msg:""
        },
        computed:{//申明计算属性，编写有提示，分离代码
            birth(){
                return new Date(this.birthday).getFullYear() +"年" + new Date(this.birthday).getMonth()+"月"
            }
        },
        watch:{//可以监听data属性值的变化
            msg(newVal,oldVal){
                console.log("newVal=="+newVal,"oldVal==="+oldVal);
            }
        }
    });
</script>

3.钩子函数 mounted(){} 页面加载完成触发

vue生命周期图解
在这里插入图片描述

<body>
<div id="app">
    <input type="text" v-model="msg"/>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"sdfsadfasd"
        },
        beforeCreate(){
            alert(111);
        },
        created() {
            alert(222);
        },
        beforeMount() {
            alert(333)
        },
        mounted(){			//整个页面加载完成触发,,相当于mvc的页面加载事件,在它里面我们可以发送ajax请求到后台拿数据
            alert("444");
        }
    });
</script>

四：webpack打包

作用：

0.可以将ES6转为ES5让浏览器可以解析
1.模块化后a.js引入b.js,然后页面只用引入a.js，但实际还是会请求多次，而webpack可以打包碎片化的文件，浏览器在加载的时候，只请求一次。
2.混淆压缩js+css代码
3.可以部署前端项目

安装

直接命令打包 新版本已不支持
配置文件打包 推荐
1.在项目根目录下创建：webpack.config.js 内容拷贝 https://webpack.docschina.org/
2.在webpack.config.js里需要调整打包入口和输出路径

const path = require('path');

module.exports = {
    entry: './js/a.js',											/*打包入口*/
    output: {													/*输出路径*/
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle3.js',
    },
};

3.控制台输入webpack
commonjs语法
===ES6 导出 define 导入 require
c.js

define(function () {
    return "C模块";
})

d.js

let c = require("./c.js");
alert(c);

webpack.config.js

const path = require('path');

module.exports = {
    entry: './js/d.js',											/*打包入口*/
    output: {													/*输出路径*/
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle2.js',
    },
};

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="dist/bundle2.js"></script>
</head>
<body>
</body>
</html>

打包js和css

如果是打包css

1 安装两个加载器
  npm install style-loader --save-dev						 使用css的加载器
  npm install css-loader --save-dev							解析css的加载器
2 需要在webpack.config.js增加配置module

       module: {
               rules: [
                   {
                       test: /.css$/i,								//扫描所有css后缀文件
                       use: ["style-loader", "css-loader"],			//使用两个加载器
                   },
               ],
           }

使用webpack运行项目（重要）

1.安装插件
npm install webpack-dev-server --save-dev
2.添加启动脚本
在package.json中配置script

"scripts": {
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js",},

3.通过命令启动服务
npm run dev

出现被覆盖引起的报错就修改依赖解决 (课件中复制即可) 再执行 npm install 刷新js库

Project is running at http://localhost:8080/

复制链接+页面名称到浏览器测试
在这里插入图片描述
终止运行命令：ctrl + c

五：Vue-cli 脚手架必须搞定

搭建脚手架

创建新的staticWeb项目

1.安装脚手架命令：
npm install -g vue-cli 全局安装，以后不用再安装
2.基于脚手架安装webpack环境
vue init webpack
路由前和本身yes 后no npm
3.安装完成运行
npm run dev

Your application is running here: http://localhost:8080

在这里插入图片描述

脚手架运行流程

在这里插入图片描述

HelloWorld.vue本来应该放到App.vue但main.js又把App.vue作为局部组件引用过来
有了局部组件后index.html本来应该通过app自定义标签去使用组件,但是这里直接嵌进index.html去了