组件 单文件组件 回顾 笔记

options配置项

组件的创建方式：
            全局组件 任何vm都可以使用
            Vue.component()

            局部组件  只能局部使用
            components

 参数1:是组件名称
        参数2：组件的配置项
                这个配置项中Vue的配置项中有什么这里面的配置项就有什么。
                生命周期也会有。你可以理解成组件就是一个小型的VUe实例
   
            唯一不同的是当前的配置项中的data不在是一个对象了而是一个函数 返回一个对象


            template:类似于HTML模板   用来写组件的结果

打包npx webpack
设置model属性 去定义环境是开发环境还是生产环境
这是是去定义一个开发环境

基本配置

代码：

//webpack的配置
module.exports = {
    mode:'development',
    //入口配置
    entry:{
        app:PATH.dev
    },
    //出口配置
    output:{
        filename:"[name].js",
        path:PATH.build
    }
  }

11

代码如下：

 //配置loader  将浏览器不识别的一些语法转换为浏览器识别的一些语法
    module:{
        //规则
        rules:[
            {
                test:/\.(js)$/,
                use:{
                    loader:"babel-loader",
                    options:{//ES6代码转换成ES5的配置项
                        presets:["@babel/env"]//ES6代码转换成ES5的配置规则
                    }
                }
            }

11

安装解析JS的babel文件
        cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

    8、安装解析CSS的loader文件
         cnpm install --save-dev style-loader css-loader  sass-loader node-sass

    9、安装html插件
        cnpm install -D html-webpack-plugin

所有的插件都是一个构造函数

使用的时候都必须new

 plugins:[
        new htmlWebpackPlugin({
            filename:"index.html",//打包后的文件名称
            template:"index.html",  //模板文件
            title:"Vue"
        }),
        new VueLoaderPlugin()
    ]

1
固定写法

安装处理图片的loader
        cnpm install url-loader file-loader -D

1

   /*
                    当图片的大小小于2048的时候用url-loader做解析  
                    大于2048的时候用file-loader做解析 系统会自动去找file-loader

                    url-loader:解析的时候会解析成base64的形式
                    file-loader会解析成原本的形式
                */
                test:/\.(jpg|png|gif)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:2048
                    }
                }

1
安装处理vue的文件loader
cnpm install -D vue-loader vue-template-compiler

做引入

安装vue.js

        cnpm install vue -S

引入

html js css

渲染 挂载

会有情况出现波浪线
解决办法：

安装服务器环境
cnpm install webpack-dev-server -D
自动创建服务器就不用每次打包

打开页面时，自动打开浏览器

四合一

<template>
    <div id="app">
        <Banner/>
        <Nav/>
        <List/>
        <Footer/>
    </div>
</template>


    <script>
    import Banner from "./components/banner.vue"
    import Nav from "./components/nav.vue"
    import List from "./components/list.vue"
    import Footer from "./components/footer.vue"
    export default {
        components:{
            Banner,
            Nav,
            List,
            Footer
    
        }
    }
    </script>
    
    
    <style>
        
    
    
    </style>