移动端项目vue+vant3（二）

iconfont-阿里巴巴矢量图标库

（1）选择图标库

（2）加入项目

（3）复制代码粘贴到

<script src="http://at.alicdn.com/t/c/font_4277837_pjswqymv09l.js"></script>

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

App.vue

<template>
<div class="app">这是app组件</div>
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
</template>

<script>
export default {
  name: 'App',
}
</script>


<style scoped>
.app{
  width: 160px;
  height: 160px;
  background: red;
}

</style>

引入代码

（4）成功

路由配置

（1）安装依赖

yarn add vue-router@4 -S

（2）新建views内的项目

（3）配一下router

import { createRouter,createWebHashHistory } from 'vue-router';
const router = createRouter({
    history : createWebHashHistory(),
    routes:[
        {
            path:"/home",
            component:()=>import('../views/home/index.vue')
        },
        {
            path:"/order",
            component:()=>import('../views/order/index.vue')
        },
        {
            path:"/mine",
            component:()=>import('../views/mine/index.vue')
        },
        {
            path:"/cart",
            component:()=>import('../views/cart/index.vue')
        },
    ]
})
export default router

（4）在根目录下创建文件

module.exports = {
    root: true,
    env: {
      node: true
    },
    'extends': [
      'plugin:vue/essential',
      'eslint:recommended'
    ],
    parserOptions: {
      parser: '@babel/eslint-parser'
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       //在rules中添加自定义规则
       //关闭组件命名规则
       "vue/multi-word-component-names":0,
    },
    overrides: [
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
          jest: true
        }
      }
    ]
  }
  

（5）启动项目换一下

路由看看

成功

less和vant-ui的使用

less引入

（1）安装less的依赖

yarn add less less-loader@7 -S

（2）试着引入less样式

<template>
    <div class="home">
        <div>
            首页
        </div>
    </div>
</template>
<style lang="less" scoped>
.home{
    div{
        color: rgb(0, 0, 0);
    }
}

</style>

完成

vant-ui引入

官网

Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

yarn add i vant@next -S

全局引入

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'
import 'amfe-flexible'
import router from './router/index'
import 'vant/lib/index.css'
import { Button } from 'vant'
const app = createApp(App)
app.use(router).use(Button)
app.mount('#app')

App.vue

<template>
    <div class="home">
        <div>
            首页
        </div>
        <van-button type="primary">点击</van-button>
    </div>
</template>
<style lang="less" scoped>
.home{
    div{
        color: rgb(0, 0, 0);
    }
}

</style>

按需引入

安装插件

yarn add unplugin-vue-components -D

// vue.config.js
const pxToRem = require('postcss-pxtorem')
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
const postcss = pxToRem({
  rootValue: 16,
  propList: ['*']
})

module.exports = {
  transpileDependencies: true,
  // 添加此行代码
  lintOnSave:false,

  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            postcss
          ],
        }

      },
 
    },

  },

};

烦死人惹有报错

报错：

找不到ComponentsPlugin

先找webpack这个文件

然后进入后发现输出的是default

加上.default就好啦

模块化的问题

修改config.js文件

// vue.config.js

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack').default;
console.log(ComponentsPlugin)
module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-pxtorem')({ rootValue: 16 , propList: ['*']}),
          ],
        },
      },
    },
    configureWebpack: {
        plugins: [
          ComponentsPlugin({
            resolvers: [VantResolver()],
          }),
        ],
      },
  };

修改main.js

改成vant

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'
import 'amfe-flexible'
import router from './router/index'
// import 'vant/lib/index.css'
import { Button } from 'vant';
const app = createApp(App)
app.use(router).use(Button)
app.mount('#app')

然后启动成功

vant-ui引入使用的总结

全局引入Icon

新建footer.vue

引入icon

Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

<template>
    <div>
        <div>
          <router-link to="/home">
            <van-icon name="wap-home-o" />
            首页
          </router-link>
        </div>
        <div>
            <router-link to="/cart">
                <van-icon name="qr" />
                课程分类
            </router-link>
          </div>
          <div>
            <router-link to="/order">
                <van-icon name="orders-o" />
                我的课程
            </router-link>
          </div>
          <div>
            <router-link to="/mine">
                <van-icon name="user-o" />
                用户中心
            </router-link>
          </div>
    </div>
</template>
<style lang="less" scoped>


</style>

在首页内引入

<template>
    <div class="home">
        <Footer/>
    </div>
</template>
<script setup>
import Footer from '../../components/Footer.vue';
</script>
<style lang="less" scoped>


</style>

完成

来到mian.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'
import 'amfe-flexible'
import router from './router/index'
import 'vant/lib/index.css'
import { Button, Icon } from 'vant';
const app = createApp(App)
app.use(router).use(Button).use(Icon)
app.mount('#app')

完成

按需引入Icon（推存）

vue.config.js

// vue.config.js

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack').default;
console.log(ComponentsPlugin)
module.exports = {
  lintOnSave: false,
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-pxtorem')({ rootValue: 16 , propList: ['*']}),
          ],
        },
      },
    },
    configureWebpack: {
        plugins: [
          ComponentsPlugin({
            resolvers: [VantResolver()],
          }),
        ],
      },
  };

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'
import 'amfe-flexible'
import router from './router/index'
// import 'vant/lib/index.css'
// import { Button, Icon } from 'vant';
const app = createApp(App)
app.use(router)
// .use(Button).use(Icon)
app.mount('#app')

完成