Vue.js入门知识day6
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 [email protected]
- 在
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.****.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.****.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
- 在
main.js
中导入自定义路由模块
import router from './router.js'