Font Awesome是一个流行的CSS库，用于向Web应用程序添加图标。它可以作为原始CSS包提供，也有主要前端框架的版本。对于Vue.js，我们可以使用vue-fontawesome在我们的应用程序中添加图标。
在本文中，我们将制作一个购物清单应用程序，用户可以在其中使用MealDB API搜索想要烹饪的菜肴，并从中添加所需的食材。我们将在按钮上添加涟漪效果，并在鼠标指针移到按钮上并列出项目时使其突出显示。
要开始构建应用程序，我们可以通过运行来运行Vue CLI npx @vue/cli grocery-app。在向导中，选择“手动选择功能”，然后选择Babel，Vuex，Vue Router和CSS Preprocessor。
接下来，我们安装一些其他软件包。我们需要Axios来发出HTTP请求，需要BootstrapVue来样式化，需要Vue Font Awesome来添加图标，需要Vee-Validate来进行表单验证，并需要Vue Ripple指令来增加波纹效果。要安装它们，我们运行：
npm i axios @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome axios bootstrap-vue vee-validate vue-ripple-directive
安装所有软件包后，我们可以构建应用程序。我们首先添加用于添加食品的表格。GroceryForm.vue在components文件夹中创建一个文件并添加：
<template>
<div>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<b-form @submit.prevent="onSubmit" novalidate>
<b-form-group label="Search for Dish and Add Ingredients From Result">
<ValidationProvider name="keyword" rules="required" v-slot="{ errors }">
<b-form-input
type="text"
:state="errors.length == 0"
v-model="form.keyword"
required
placeholder="Search for Dish and Add Ingredients From Result"
name="keyword"
></b-form-input>
<b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
</ValidationProvider>
</b-form-group>
<b-button v-ripple.mouseover.500 type="submit" variant="primary">Find Dishes</b-button>
</b-form>
</ValidationObserver>
<b-card v-for="(m, i) in meals" :title="m.strMeal" :key="i">
<b-card-text>
<b-list-group>
<b-list-group-item
v-for="(key, index) in Object.keys(m).filter(k => k.includes('strIngredient') && m[k])"
:key="index"
v-ripple.mouseover="'rgba(255, 255, 255, 0.35)'"
>{{m[key]}}</b-list-group-item>
</b-list-group>
</b-card-text>
<b-button
v-ripple.mouseover.500
variant="primary"
@click="addToGroceryList(i)"
>Add Ingredients to Grocery List</b-button>
</b-card>
<h4>Your Chosen Ingredients</h4>
<b-list-group>
<b-list-group-item v-for="(ingredient, i) of ingredients" :key="i" v-ripple.mouseover>
{{ingredient}}
<font-awesome-icon icon="times" class="float-right" @click="removeIngredient(i)" />
</b-list-group-item>
</b-list-group>
<br />
<b-button v-ripple.mouseover.500 type="button" variant="primary" @click="saveGroceryList()">Save</b-button>
<b-button v-ripple.mouseover.500 type="reset" variant="danger" @click="cancel()">Cancel</b-button>
</div>
</template>
<script>
import { requestsMixin } from "@/mixins/requestsMixin";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
export default {
name: "GroceryForm",
mixins: [requestsMixin],
components: {
faTimes
},
data() {
return {
form: {},
meals: [],
ingredients: []
};
},
computed: {
grocery() {
return this.$store.state.grocery;
}
},
methods: {
cancel() {
this.$emit("cancelled");
},
async onSubmit() {
const isValid = await this.$refs.observer.validate();
if (!isValid) {
return;
}
const { data } = await this.findDishes(this.form.keyword);
this.meals = data.meals;
},
addToGroceryList(index) {
const meal = this.meals[index];
const keys = Object.keys(meal).filter(
k => k.includes("strIngredient") && meal[k]
);
const ingredients = keys.map(k => meal[k]);
this.ingredients = Array.from(
new Set(this.ingredients.concat(ingredients))
);
},
removeIngredient(index) {
this.ingredients.splice(index, 1);
},
async saveGroceryList() {
const payload = { ingredients: this.ingredients };
if (!this.groceryListId) {
await this.addGrocery(payload);
} else {
await this.editGrocery(payload);
}
const { data } = await this.getGrocery();
this.$store.commit("setGrocery", data);
this.$emit("saved");
}
},
watch: {
grocery: {
handler(val) {
this.ingredients = val.ingredients || [];
},
deep: true,
immediate: true
}
}
};
</script>
<style lang="scss" scoped>
.delete {
cursor: pointer;
}
</style>
该表单使用户可以使用给定的关键字搜索菜肴，然后返回菜肴的配料列表，然后用户可以将其添加到已删除重复项的列表中。我们使用Vee-Validate来验证我们的输入。我们使用ValidationObserver组件来监视组件内部表单的有效性，并ValidationProvider检查组件内部输入的输入值的验证规则。在中ValidationProvider，我们有用于文本输入字段的BootstrapVue输入。在b-form-input组件中。我们还添加了Vee-Validate验证，以确保用户在提交之前填写了日期。我们keyword在rules道具中设置了必填字段，以便用户在搜索之前必须输入内容。
我们在表单底部的列表中有包含成分列表的按钮，用于删除每个成分。这就是为什么我们在faTimes此处导入图标的原因，该图标显示为“ x”，以便用户可以单击并删除它。如果单击该元素，removeIngredient则调用该函数。然后，用户单击表单底部的“保存”，然后saveGroceryList调用该函数，将列表保存到我们的后端。
在此组件中，我们还有一个watch块来监视grocery值，该块是从必须构建的Vuex存储中获得的。随着grocery值的更新，我们将获得最新的配料清单。
我们使用Vue Ripple将波纹效果应用到按钮和列表行。v-ripple.mouseover.500表示使用此指令将鼠标悬停在元素上时，纹波效果将显示500毫秒。要为波纹效果应用不同于默认颜色的颜色，我们还可以在伪指令的参数中指定颜色值，就像in中一样v-ripple.mouseover=”’rgba(255, 255, 255, 0.35)’”。波纹将具有指定的颜色。
我们使用样式设置元素以删除表单，cursor:pointer因此鼠标图标将显示一只手而不是箭头。
接下来，我们创建一个mixins文件夹并添加requestsMixin.js。在文件中：
const APIURL = "http://localhost:3000";
const MEAL_DB_URL = "https://www.themealdb.com/api/json/v1/1/search.php?s=";
const axios = require("axios");
export const requestsMixin = {
methods: {
getGrocery() {
return axios.get(`${APIURL}/grocery`);
},
addGrocery(data) {
return axios.post(`${APIURL}/grocery`, data);
},
editGrocery(data) {
return axios.put(`${APIURL}/grocery`, data);
},
findDishes(keyword) {
return axios.get(`${MEAL_DB_URL}${keyword}`);
}
}
};
这些是我们在组件中使用的功能，用于发出HTTP请求以获取并保存我们的食品杂货数据并在Meal DB API中搜索菜肴。
接下来的中Home.vue，将现有代码替换为：
<template>
<div class="page">
<h1 class="text-center">Grocery List</h1>
<b-button-toolbar class="button-toolbar">
<b-button
v-ripple.mouseover.500
@click="openAddModal()"
variant="primary"
>Add Ingredients to Grocery List</b-button>
</b-button-toolbar>
<h4>Your Grocery List</h4>
<b-list-group>
<b-list-group-item
v-for="(ingredient, i) of grocery.ingredients"
:key="i"
v-ripple.mouseover="'rgba(255, 255, 255, 0.35)'"
>
{{ingredient}}
<font-awesome-icon icon="times" class="float-right" @click="removeIngredient(i)" />
</b-list-group-item>
</b-list-group>
<b-modal id="add-modal" title="Add Ingredients to Grocery List" hide-footer>
<GroceryForm
@saved="closeModal()"
@cancelled="closeModal()"
:edit="false"
:groceryListId="grocery.id"
/>
</b-modal>
</div>
</template>
<script>
// @ is an alias to /src
import GroceryForm from "@/components/GroceryForm.vue";
import { requestsMixin } from "@/mixins/requestsMixin";
export default {
name: "home",
components: {
GroceryForm
},
mixins: [requestsMixin],
computed: {
grocery() {
return this.$store.state.grocery;
}
},
data() {
return {
ingredients: []
};
},
beforeMount() {
this.getGroceryList();
},
methods: {
openAddModal() {
this.$bvModal.show("add-modal");
},
closeModal() {
this.$bvModal.hide("add-modal");
},
async getGroceryList() {
const { data } = await this.getGrocery();
this.$store.commit("setGrocery", data);
},
async removeIngredient(index) {
this.ingredients.splice(index, 1);
const payload = { id: this.grocery.id, ingredients: this.ingredients };
await this.editGrocery(payload);
const { data } = await this.getGrocery();
this.$store.commit("setGrocery", data);
}
},
watch: {
grocery: {
handler(val) {
this.ingredients = val.ingredients || [];
},
deep: true,
immediate: true
}
}
};
</script>
};
这是主页的组件。我们在这里显示从后端获得的所选配料列表。另外，我们还有一个按钮来打开一个模式，该模式与GroceryForm我们先前创建的一起添加到购物清单中。获取数据是在getGroceryList函数中完成的。我们将获得的数据放在函数的最后一行中的Vuex存储中。
此外，我们还允许用户使用该removeIngredient功能删除保存在此页面列表中的成分。我们调用从存储中的状态获得splice的this.ingredients数组，grocery然后将其设置为handler的watch块中的当前值grocery。
同样，我们使用Vue Ripple将波纹效果应用到按钮和列表行。v-ripple.mouseover.500显示按钮和按钮500毫秒的涟漪效应v-ripple.mouseover=”’rgba(255, 255, 255, 0.35)’”。像我们在中所做的那样，涟漪图将具有在列表项中指定的颜色GroceryForm。
接下来的App.vue，我们将现有代码替换为：
<template>
<div id="app">
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand to="/">Grocery List App</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/" :active="path == '/'">Home</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
path: this.$route && this.$route.path
};
},
watch: {
$route(route) {
this.path = route.path;
}
}
};
</script>
<style lang="scss">
.page {
padding: 20px;
}
button,
.btn.btn-primary {
margin-right: 10px !important;
}
.button-toolbar {
margin-bottom: 10px;
}
</style>
这会将Bootstrap导航栏添加到页面顶部，并router-view显示我们定义的路线。本style部分不受范围限制，因此样式将在全球范围内应用。在.page选择器中，我们向页面添加一些填充。我们在剩余style代码中为按钮添加一些填充。
然后在中main.js，将现有代码替换为：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import { ValidationProvider, extend, ValidationObserver } from "vee-validate";
import { required, min_value, max_value } from "vee-validate/dist/rules";
import Ripple from "vue-ripple-directive";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
library.add(faTimes);
Vue.component("font-awesome-icon", FontAwesomeIcon);
Vue.directive("ripple", Ripple);
extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
我们在此处添加了我们需要的所有库，包括BootstrapVue JavaScript和CSS，Vee-Validate组件以及验证规则，Vue-Ripple库和Vue Font Awesome软件包。使用Vue Font Awesome faTimes的library.add功能将其添加到我们的应用程序中，以便我们可以在我们的应用程序中使用它。
在router.js我们将现有代码替换为：
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
}
]
});
这包括我们路线中的主页，以便用户可以看到该页面。
在中store.js，我们将现有代码替换为：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
grocery: {}
},
mutations: {
setGrocery(state, payload) {
state.grocery = payload;
}
},
actions: {}
});
这增加了我们的杂货店状态到店，所以我们可以观察它在computed块GroceryForm和HomePage组件。我们具有setGrocery更新grocery状态的功能，可以this.$store.commit(“setGrocery”, data);像在GroceryForm和中那样通过调用在组件中使用它HomePage。
最后，index.html我们将现有代码替换为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>Grocery List App</title>
</head>
<body>
<noscript>
<strong
>We're sorry but vue-ripple-tutorial-app doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这将更改我们应用的标题。
经过所有艰苦的工作，我们可以通过运行来启动我们的应用程序npm start。
要开始后端，我们首先json-server运行运行该软件包npm i json-server。然后，转到我们的项目文件夹并运行：
json-server --watch db.json
在中db.json，将文本更改为：
{
"grocery": {}
}
因此，我们grocery在requests.js可用项中定义了端点。
经过所有的努力，我们得到：
翻译自：https://levelup.gitconnected.com/how-to-add-font-awesome-icons-to-your-vue-js-app-3641831887fd
网友评论