webpack 中使用vue-router 和 lang scoped属性

港控/mmm° 2022-12-21 09:28 145阅读 0赞

## 在webpack中使用vue-router： ##

1，cnpm i vue-router -S，cnpm i vue-router -D  
2，在js入口函数中写入：

import VueRouter from 'vue-router'
    /*还需要手动注册安装一下*/
    Vue.use(VueRouter)

再在package.config.js 中配置一下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]

3，创建路由的实例对象：

// 在 router.js文件中
    export let routers = new VueRouter({ 
    	routes: [
    		{ path:XXX, component: xxxx}
    	]
    })

4，因为在main.js入口函数中已经使用render函数对login.vue组件进行渲染了，render是会覆盖掉app不能在html的\#app中建了，所以新建的组件 router-link to 就只能放在 render：c=>(login) 的login组件中了，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]  
5，将路由的文件从main.js中抽离出来，新建一个router.js的文件

## 关于 **lang** 和 **scoped** 属性 ##

在组件 .vue 文件中会有 style 标签，在组件重叠的情况下，style样式最好是只能控制自己目前所在的作用域也就是当前组件中，所以设置一个作用域 scoped的属性：

lang 对 “less” 和 “scss” 的选择：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6ad6daf244e44fcfb77a6a5636f4079f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/473859c99ba541cfae13254382e76e4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/5a47de5b680448ba9aedf16910af0f6e.png