一、配置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>
二、定制主题
引入vant样式表
新建主题样式表,theme.less
修改按需引入style
新建vue.config.js 引入主题样式
三、配置路由
安装vue-router
npm i vue-router@3.5.3 -D
在src目录下新建页面文件夹pages,然后在pages文件夹下新建页面index.vue,mine.vue。
在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:'我的'
}
}]
})
main.js: router 挂载到根实例对象上,在main.js 文件中引入router 文件下的index.js 路由配置文件,并在根实例中注册。
最後在App.vue页面上加上 <router-view></router-view>