vue2使用less+vant2.x定制主题+配置路由详细步骤（第二步）

一、配置Less

1.考虑less-loader的兼容问题，如果7.0.0不行，就一步一步下探，6.0.0 5.0.0

npm install less-loader@7.0.0

2.安装less-loader成功后，

npm install --save less //安装less

3.在main.js中,引入less并使用

import less from 'less' //在main.js中,引入less并使用
Vue.use(less)

4.页面中使用

<style lang='less' scoped> //直接使用

</style>

二、定制主题

1. 引入vant样式表

2. 新建主题样式表，theme.less

3. 修改按需引入style

4. 新建vue.config.js 引入主题样式

三、配置路由

1. 安装vue-router

npm i vue-router@3.5.3 -D

2. 在src目录下新建页面文件夹pages，然后在pages文件夹下新建页面index.vue,mine.vue。

3. 在src目录下新建文件夹router，然后在router文件夹下新建 index.js.内容如下

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)
export default new Router({
    mode:"hash",
    base:process.env.BASE_URL,
    routes:[
        {
        path:'/',
        name:'Index',
        component :()=> import('@/pages/index.vue'),
        meta:{
            title:'首页'
        }
    },
    {
        path:'/mine',
        name:'Mine',
        component :()=> import('@/pages/mine.vue'),
        meta:{
            title:'我的'
        }
    }]
})

4. main.js： router 挂载到根实例对象上，在main.js 文件中引入router 文件下的index.js 路由配置文件，并在根实例中注册。

5. 最後在App.vue页面上加上 <router-view></router-view>