Vue.js入门知识day6-CSDN博客

本文链接：https://blog.csdn.net/ganlubaba666/article/details/87891090

Vue.js入门知识day6

webpack中url-loader的使用
- 使用情景
- 使用url-loader处理字体文件
关于npm和webpack几个问题的说明
webpack中babel的配置
使用vue实例的render方法渲染组件
区分webpack中导入vue和普通网页中使用script导入vue的区别
- 方法一：在`main.js`中输入如下代码
- 方法二：在`webpack.config.js`中修改如下配置
在vue中结合render函数渲染指定的组件到容器中
`export default`和`export`的使用方式
结合webpack使用vue-router
结合webpack实现children子路由
组件中style标签中`lang`属性和`scoped`属性的介绍
抽离路由模块

webpack中url-loader的使用

使用情景

默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址，都处理不了

在这里插入图片描述

在webpack.config.js中的module的rules中加上匹配规则

module:{
        //这个节点，用于配置所有第三方模块加载器
        rules:[
            {test:/\.(jpg|png|gif|bmp|bpeg)$/,use:'url-loader?limit=26995&name=[hash:8]-[name].[ext]'}//处理图片路径的loader
            //limit给定的值是图片的大小，单位是byte，如果我们引用的图片大于或等于给定的 limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串
        ]
 }

限制图片大小
url-loader后面加问号可以传参

url-loader?limit = 26995

说明图片的字节数小鱼26995的图片都会被转码base64

设置根路径中图片的名字

name = [name].[ext]

是让图片保证原名，但是这有一个弊端，就是两个同名图片无法区分（从不同文件夹引用的）,所以我们可以在文件名之前加上8位hash值加以区分（最多32位）

name=[hash:8]-[name].[ext]

使用url-loader处理字体文件

首先下载3.x.x版本的bootstrap
我本人就在这里踩了坑，4版本的bootstrap没有组件

cnpm i bootstrap@3.3.7

在main.js中引用bootstrap

import 'bootstrap/dist/css/bootstrap.css'

3.在webpack.config.js里面配置loader规则

module:{
        //这个节点，用于配置所有第三方模块加载器
        rules:[
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']}//处理字体文件的 loader
        ]
    }

关于npm和webpack几个问题的说明

json文件里面不能写注释
装包装一半听了，把node_modules删了重新装，不然容易各种报错

webpack中babel的配置

因为babel更新了，兼容性问题比较麻烦

具体教程我写在我的博客
https://blog.csdn.net/ganlubaba666/article/details/87893877

使用vue实例的render方法渲染组件

1、html布局

<div id="app"></div>

2、JavaScript代码

<script>
    var login = {
        template:'<h1>这是登录组件</h1>'
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        render:function (createElements) {//createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构
            return createElements(login)
            //注意：这里return的结果，会替换页面中el指定的那个容器
        }
    })
</script>

区分webpack中导入vue和普通网页中使用script导入vue的区别

import Vue from 'vue'

成功打开网页，可是浏览器报错了

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这是因为在webpack中，使用import Vue from ‘vue’ 导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式

在vue文件夹中的package.json的包配置文件中，有一个main属性【main属性指定了这个包在被加载的时候的入口文件】，可以看到，main属性引用的js文件并不是vue.js
在这里插入图片描述
我们可以通过引用vue.js来解决这个问题，这里提供了两种引用方式

方法一：在`main.js`中输入如下代码

import Vue from '../node_modules/vue/dist/vue.js'

方法二：在`webpack.config.js`中修改如下配置

module.exports = {
    plugins:[    
    ],
    module:{
    },
    resolve:{
        alias:{//修改vue被导入时候的包的路径
            "vue$":'vue/dist/vue.js'
        }
    }
}

在vue中结合render函数渲染指定的组件到容器中

这里用的是v15的vue-loader，所以需要重新配置

这是我从官网上转置的配置方法，里面有我遇到的问题
https://blog.csdn.net/ganlubaba666/article/details/87898817

安装vue的包

		cnpm i vue -S

由于在webpack中，推荐使用 .vue这个模板文件定义组件，所以需要安装能解析这种文件的loader

		cnpm i vue-loader vue-template-complier -D

在webpack.config.js中配置组件

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	plugin:[
		new VueLoaderPlugin()
	],
	rules:[
		{test:/\.js$/,use:['babel-loader'],exclude:file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                )},//配置babel来转换高级的语法
        {test:/\.vue$/,use:['vue-loader']}//处理 .vue文件的loader
	]
}

在main.js中导入vue模块

		import Vue from 'vue'

定义一个 .vue结尾的组件，其中，组件由三部分组成:
template
script
style
使用 import login from './login.vue’导入这个组件
创建vm 的实例

		var vm = new Vue({
			el:'#app',
//   		render:function (createElements) {//在webpakc中，如果想通过vue，把一个组件放到页面中去展示，vm实例中的render函数可也实现
// 			return createElements(login)
//		}
			render:c=>c()
		})

在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域

<!--这是容器-->
    <div id="app">
        <p>{{msg}}</p>
    </div>

`export default`和`export`的使用方式

//在Node中，使用 var 名称 = require('模块标识符')来导入成员
//module.exports{} 和 exports 来暴露成员

//在es6中，也通过规范的形式，规定了ES6中如何导入和导出模块
//在ES6中导入模块， 使用 import 模块名称 from '模块标识符' import '表示路径'

//在 ES6 中，使用 export default 和 export 向外暴露成员:

// export  default {
//     name:'zs',
//     age:20
// }
var info = {
    name:'zs',
    age:20
}
export default info

//注意，export default 向外暴露的成员，可以用任意的变量来接受
//注意：在一个模块中，export default 只允许向外暴露一次
//注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员

export var title = '小星星'
export var content = '哈哈哈'

//注意：使用export向外暴露的成员，只能使用{}的形式来接受，这种形式叫做【按需导出】
//注意：export 可以向外暴露多个成员，同时，如果某些成员，我们在 import 的时候，不需要，则可以不在 {} 中定义
//注意：使用export 导出的成员，必须严格按照 导出时候的名称，来使用{}按需接受
//注意：使用export 导出的成员，如果就想换个名称来接收，可以使用as来起别名

结合webpack使用vue-router

import Vue from 'vue'
//1.导入vue-router包
import VueRouter from 'vue-router'
//2.手动安装 VueRouter
Vue.use(VueRouter)
//导入app组件
import app from  './app.vue'
// 导入account组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
//3.创建路由对象
var router = new VueRouter({
    routes:[
        // account goodslist
        {path:'/account',component:account},
        {path:'/goodslist',component:goodslist}
    ]
})

var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    //render 会把 el 指定的容器中，所有的元素都清空覆盖，所以不要把路由的router-view 和 router-link 直接写到 el所控制的元素中
    router//4.将路由对象挂载到 vm 上
})

//注意：app这个组件，是通过vm实例的 render 函数，渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el:'#app'所指定的元素中；
//Account 和 GoodsList 组件，是通过 路由匹配监听到的，所以，这两个组件，只能展示到属于路由的<router-view></router-view>中去；

结合webpack实现children子路由

import Vue from 'vue'
//1.导入vue-router包
import VueRouter from 'vue-router'
//2.手动安装 VueRouter
Vue.use(VueRouter)
//导入app组件
import app from  './app.vue'
// 导入account组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

//导入account里面的子组件
import login from './subcome/login.vue'
import register from './subcome/register.vue'

//3.创建路由对象
var router = new VueRouter({
    routes:[
        // account goodslist
        {
            path:'/account',
            component:account,
            children:[
                {path:'login',component:login},
                {path:'register',component:register}
            ]
        },
        {path:'/goodslist',component:goodslist}
    ]
})

var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    //render 会把 el 指定的容器中，所有的元素都清空覆盖，所以不要把路由的router-view 和 router-link 直接写到 el所控制的元素中
    router//4.将路由对象挂载到 vm 上
})

//注意：app这个组件，是通过vm实例的 render 函数，渲染出来的，render函数如果要渲染组件，渲染出来的组件，只能放到el:'#app'所指定的元素中；
//Account 和 GoodsList 组件，是通过 路由匹配监听到的，所以，这两个组件，只能展示到属于路由的<router-view></router-view>中去；

组件中style标签中`lang`属性和`scoped`属性的介绍

样式的 scoped属性是通过css的属性选择器实现的。

<template>
    <div>
        <h1>这是account的登录子组件</h1>
    </div>
</template>
<script></script>
<style scoped lang="scss">
/*普通的style标签，只支持普通的样式，如果想要启用scss或less，需要为style元素，设置lang属性    */
/*只要咱们的style元素标签，是在组件.vue组件中定义的，那么推荐都为style开启scoped属性，他会让样式变为组件的私有样式*/
    div{
        color: red;
    }
</style>

抽离路由模块

在src下建立一个与main.js平级的router.js

import VueRouter from 'vue-router'
// 导入account组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

//导入account里面的子组件
import login from './subcome/login.vue'
import register from './subcome/register.vue'
//3.创建路由对象
var router = new VueRouter({
    routes:[
        // account goodslist
        {
            path:'/account',
            component:account,
            children:[
                {path:'login',component:login},
                {path:'register',component:register}
            ]
        },
        {path:'/goodslist',component:goodslist}
    ]
})

//把路由对象暴露出去
export default  router