Vue.js 添加第三方框架

2020-10-10

哈哈哈,鄙人又复活了。国庆节一切安好!

前言

对于一个项目而言,前后端分离的思想,应该是这整个项目的灵魂。因此,前端、后端应当如何搭配,是一个工程师应该考虑的问题。

在实现一些小的项目的时候,碰巧接触到了较优秀的前端框架 – Vue.js 。当然,针对于Vue.js 存在很多优秀的前端框架,比如 View UI、Ant-Design、Element UI等等。因此,找准一个拿手的框架,设计起来相当顺手。

简述

鄙人看的众多前端框架中,较顺眼的为 Ant-Design 框架。Ant-Design是阿里巴巴维护的。这里展示在创建好的Vue工程中加载 Ant-design框架。

开始

前期准备

  1. 安装好 Node.js 开发环境。
  2. 了解基本的 Vue 项目结构。
  3. 拥有一定的前端基础。

创建好一个vue项目工程。

安装依赖

npm install --save ant-design-vue

安装 ant-design 官方依赖库

少许时间后,安装完成。

image-20201010181442375

等待安装成功后,项目目录下会出现新文件夹 – node_modules

image-20201010181615196

这时,基本上已经成功导入相关依赖了。

配置

在项目文件夹 src -> main.js 文件中,导入依赖包以及css文件

image-20201010181931923

导入成功后,就可以正常使用 Ant-design 相关样式了

测试

在首页文件中,加入 Ant-design 相关控件代码,运行vue项目,查看效果。

image-20201010182358939

控制台输入 npm run dev ,本地服务器查看效果。

image-20201010182751660

出现蓝色按钮,说明成功引用样式。

后续

简单记录一下这个小方法,是为了帮助一些小白,更好更快的了解和完成工作。一同加油,努力!