vant框架（引入组件，编程式导航，嵌套路由，）

1.vant框架：是一个移动端组件库，于2017年开源 -- 移动端UI框架

2.版本：

vant2：vue.js v2.

vant3：vue.js v3.

3.安装：

$npm i vant -s：vue3版本安装最新的vant
$npm i vant@latest-v2 -S：vue2版本安装vant2

4.引入组件：自动按需引入组件

1.安装babel-plugin-import插件：是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
$npm i babel-plugin-import -D
2..babelrc配置文件中添加配置
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
3.在main.js中导入vant组件并安装
import {Tabbar} from "vant"
Vue.use(Tabbar);

编程式导航

1.通过router实例方法实现导航(跳转页面)

2.路由实例：指向router/index.js中创建的实例，有对应的方法和属性，在vue实例中通过this.$router访问

3.路由对象：指向当前激活的路由状态信息，是一个对象，可以获取相关属性，在vue实例中通过this.$route访问

4.router实例方法：

router.push()：给history添加新记录--跳转到新页面
router.replace()：作用同push(),但是不会给history添加新记录，而是替换当前的history
router.go(2)：前进/后退n步

嵌套路由

1.给路由添加children选项，用来配置子路由

{
    path:"/main",
    component:Main,
    children:[
        {
            path:"msg", //子路由，不需要加/，加/表示根路由
            component:Msg
        }
    ]
}

2.在父路由组件中,依旧通过<router-view></router-view>作为渲染出口

Sass

1.安装依赖包：npm i node-sass -D

npm i sass-loader -D

2.引入sass：在vue文件的<style>中添加：lang="scss"

3.问题解决：

1.安装依赖报错：排除以下问题
1.1.使用的国外镜像，下载慢导致错误--使用cnpm或者将源设置为淘宝地址
1.2.更改用户目录下的.npmrc文件 -- npm get globalconfig查看npmrc文件位置
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
2.页面中使用
<style lang="scss">
如果编译不成功，排除是否是版本问题：
建议sass-loader安装7.3.1的版本
npm install sass-loader@7.3.1 -D
npm install node-sass@4.14.1 -D
注意：上面sass版本需要配合node14版本
如果node版本过高，会报如下错误：Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
3.如果电脑没有安装python，则需要下载安装
  python -V：查看是否有安装python