在本文中，您将学习如何使用vue.js构建todo应用。如果您对Vue基本面有任何问题，请从本series的第一章开始。您将要学习的大多数基于您获得的知识。
这不是常规的前端特定待办事项应用程序，因为可以在此应用中提供帮助您开始构建项目所需的所有功能。例如，它将具有：authentication，unit testing，pinia state management，api implementation，以及composables的使用。
有一些修改可以抵消我使用VUE 2并添加升级为Vue 3的最初计划Vue的中间人，他们希望与社区保持最新状态。
到目前为止，该项目使用了PINIA，VUE和TAILWIND CSS的最新版本。这是您可以开始的方式：
设置项目锅炉板：
创建项目
要创建一个项目，请遵循分步指南，在 documentation 中设置VUE项目。为单位测试添加vitest；该项目不支持打字稿，因此无需添加它。添加Pinia和Vue路由器。请确保您添加所有这些选项功能。
安装图标Libary和Axios
图标对于在开发应用程序时表示一些信息很重要。字体很棒是为此目的而设计的图标库。要进行快速安装，请按照有关如何将此库添加到VUE 2或3 App here的说明。
Axios是一个著名的JavaScript库，用于提出HTTP请求。它经常在vue.js项目中用于与API交互并检索数据。这是您在VUE项目中的install和配置Axios的方法：
安装尾风CSS：
tailwind CSS是一种实用第一的CSS框架，它通过提供一组预先设计的原子级实用程序类来简化Web开发。这些类可以直接应用于HTML元素，以在不编写自定义CSS的情况下快速设计和设计它们。 Tailwind CSS遵循“实用优先”的理念，这意味着开发人员可以通过结合现有的实用程序类来构成样式，而不是为每个元素创建自定义类别。 Here is how you can also add it to the project
这就是您完成所有安装后的package.json的样子。
Package.json：
{
"name": "dev-project",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "vitest",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3",
"axios": "^1.4.0",
"pinia": "^2.1.4",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.2",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/test-utils": "^2.4.1",
"autoprefixer": "^10.4.15",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.15.1",
"jsdom": "^22.1.0",
"postcss": "^8.4.28",
"prettier": "^3.0.0",
"tailwindcss": "^3.3.3",
"vite": "^4.4.6",
"vitest": "^0.33.0"
}
}
设置tailwind.config.js文件：
Tailwind CSS的关键功能之一是它可以通过称为tailwind.config.js的配置文件来自定义的能力。该文件使您可以修改Tailwind默认行为的各个方面并扩展其功能。
如果您遵循了installation process here，则将尾风添加到根文件夹中。
Tailwind.config.js：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1024',
xxl: '1440px',
},
colors: {
'primary': '#414066',
'solid-varaint': '#4C6640',
'light-variant': '#525168',
},
fontFamily: {
popins: ['Poppins', 'sans-serif'],
},
extend: {
borderRadius: {
'2xl': '1rem',
'4xl': '2rem',
}
},
},
plugins: [
require('autoprefixer'),
]
}
这种配置是我们根据项目需求自定义尾风CSS的方式。这是配置的每个部分：
1.content：指定尾风应扫描以查找二手类的文件。在这种情况下，它正在寻找html，vue，javaScript和打字稿文件。
2.theme：本节使您可以自定义tailwind提供的默认样式。
-
screens：定义响应式设计的断点。我们指定了针对不同断点，例如小（SM），中（MD），大（LG），超大（XL）和XXL的屏幕尺寸。 -
colors：定义自定义颜色名称及其相应的十六进制值。 -
fontFamily：指定一个自定义字体系列在您的项目中使用，在这种情况下，“ poppins”带有“ sans-serif”的后备。但是，要使该字体正常工作，我们必须将其从google fonts安装或搜索并导入到您的main.css文件中。
src/assets/main.css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,800;1,300&family=Poppins:wght@400;500&display=swap');
@import './base.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
-
extend：允许您添加或修改现有主题值。在这里，您添加了两个附加边框半径值。
3.plugins：这是您可以在其中包含尾风设置的其他插件。该示例包括autoprefixer插件，该插件将供应商前缀添加到CSS属性。
修改配置后，请记住要运行构建过程以查看项目样式的更改。
设计VUE路线的视图：
每条路线对应于您的应用程序中的特定view/component。在VUE中，视图通常是作为VUE单文件组件（.VUE文件）创建的，其中包括模板，脚本和样式部分。这是您可以创建视图的方式：
1.在您的src/views/目录中创建名为login.vue的文件。此文件将包含您的登录视图的模板，脚本和样式。重复相同的方法来创建您的寄存器和Dashbaord View
登录。VUE
<template>
<div>Login</div>
</template>
<script>
export default {
name:'LoginView',
components: {},
}
</script>
register.vue
<template>
<div>Register</div>
</template>
<script>
export default {
name:'RegisterView',
components: {},
}
</script>
dashboard.vue
<template>
<div>Dashboard</div>
</template>
<script>
export default {
name:'DashboardView',
components: {},
}
</script>
创建视图页面后，我们将负责使用VUE路由器库在应用程序中配置和注册页面。我们通过以下步骤完成此操作：
src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Register from '../views/Register.vue';
import Login from '../views/Login.vue';
import Dashbaord from '../views/Dashboard.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: Login
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashbaord
},
]
})
export default router
这是路由如何工作的解释：
1.Imports：
从“ vue-router”软件包导入了creterouter和createwebhistory功能。这些功能用于创建和配置路由器实例。
2.Component Imports：
导入了三个VUE组件（寄存器，登录和仪表板）。这些组件将用作应用程序中不同路由的视图。
3.Router Configuration：
使用createrouter函数创建路由器实例。它采用一个具有两个属性的对象：历史记录和路线。
将历史属性设置为使用来自Import.meta.env.base_url的基本URL的Web历史模式。
路由属性是包含路由对象的数组。每个对象都定义了一个路由，该路由具有路径（URL路径），名称（路由名称）和组件（关联的VUE组件）。
4.Route Definitions：
定义了四个路线：
-
'/'：使用登录组件代表主页。 -
'/login'：使用登录组件表示登录页面。 -
'/register'：使用寄存器组件代表注册页面。 -
'/dashboard'：使用仪表板组件代表仪表板页面。
5.Export：
配置的路由器实例被导出为默认导出。这允许在整个应用程序中使用路由器，以根据路线进行导航和渲染。
本质上，此代码建立了VUE应用程序的路由结构。当用户访问特定路由时，将显示关联的组件，创建无缝且有组织的用户体验。