跟着写一个vue项目(1)使用阿里巴巴矢量图+vant-ui的安装+项目完善

最新推荐文章于 2023-08-11 06:30:00 发布

我叫小邋遢

最新推荐文章于 2023-08-11 06:30:00 发布

阅读量197

点赞数

分类专栏： vue 文章标签： ui

本文链接：https://blog.csdn.net/m0_58565716/article/details/128836957

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

阿里巴巴矢量图官网：

阿里巴巴矢量图

使用方法如下（使用方法在官网有详细记录）

首先我们将需要的图标选到购物车中，然后生成项目，然后选择 symbol 引用，将项目生成的网址引用到index.html中

因为只有引入全局的index种才能在全局中使用，然后在，reset.css中粘贴上如下代码

.icon {
    width: 10em; height: 10em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }

这样就可以通过改变width和height来改变大小！！

最后记得把css文件引入到main.js中，引入到main.js中的话全局就可以使用啦。

使用过程是通过更换标签就可以使用

<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-sousuo"></use>

</svg>

vant-ui

安装

npm i vant

{请注意版本的选择，要不然按需引用会出错}

这是vue2的安装

使用的话分为全局引用和按需引用。

按需引用效果更好，所以我们选择按需引用，不过按需引用需要在多安装一个插件

npm i unplugin-vue-components -D

安装插件后就可以直接使用不同的样式了，不需要在main.js中在全局注册了。

然后我们需要将使用vue-router

安装vue-router

npm install vue-router --save

然后新建 router文件夹 ---->index.js

新建 views文件夹---->编写路由组件

在index.js中编写路由内容

// 第零步，导入需要的vue-router插件
import {createRouter, createWebHashHistory } from 'vue-router'
// 第一步，将需要跳转的组件引入到js文件当中
import  App  from  '../App.vue'
import  Home  from  '../views/Home.vue'
import  Mine from  '../views/Mine.vue'
import Cart  from   '../views/Cart.vue'
import  Order   from  '../views/Order.vue'
//第二步，编写对应的路由表
const  routes = [

    {path:"/home",component :Home},
    {path:"/mine", component:Mine},
    {path:"/cart",component:Cart },
    {path:"/order",component:Order}
] 
// 第三步，创建路由实例，并且传递routes配置
// 解释一下：调用createRouer方法创建路由实例，里面需要两个参数，一个是路由的模式 有hash 和history，一个是我们写好的路由表
 const  router = createRouter({
    history:createWebHashHistory(),
    routes,
 })
//  第四步，将router暴露出去，让main.js可以捕获
export default  router

然后在main.js中引入，use注册并且留下窗口即可

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/reset.css'
import 'amfe-flexible'
import router from './router'

const app =   createApp(App)
app.use(router)
app.mount('#app')