If you want to iterate quickly on a project, wheels are essential. normalize.css, element-plus, axios, moment, vue-router, less, do you know all the wheels that you must know about the front end?
Browser default style unified normalize.css
npm i normalize.css
Just add a line to src/main.js
import 'normalize.css'
复制代码The main thing this library does is to unify browser default styles, not to clear browser default styles. So tags with their own styles like h1, h2, strong still retain their styles, and the margin of the body is unified to 0
UI framework element-plus
npm i element-plus
Because it is full stack development, product -> UI -> front-end -> back-end -> database, I can write code, but PS and skecth are really powerless. It is necessary to develop a UI framework.
key code
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
app.use(ElementPlus)
复制代码Since it is to be used in the whole project, and most of the components provided by element-plus are used. Here is the complete introduction directly and rudely.
Of course, it can also be introduced as needed in specific projects according to the actual situation.
network request axios
npm i axios
import axios from 'axios'
window.axios = axios
复制代码As a front-end developer, it is reasonable to define a few global variables.
date handling moment
npm i moment
import moment from 'moment'
window.moment = moment
复制代码As I said earlier, moment is used everywhere on every page, and it is logical to define it as a global variable
SPA routing vue-router
npm i vue-router
The official route of vue does not need to be explained.
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [],
})
app.use(router)
复制代码After the front-end routing was added, it was officially started.
Next, you can move steadily forward page by page.
css preprocessor less
npm i less
You can use less in vue's sfc
<style lang="less"></style>
复制代码at last
Clean up some hello world sample code generated by vite scaffolding
Create a new homepage route
{
path: '/',
component: () => import('./pages/Home.vue')
},
复制代码上图右半拉是不可不知的 vue 开发调试神器 vue-devtools。官方出品，必属精品。
现在项目的主要依赖如下
# 前端
vite 3
vue 3
vue-router 4
element-plus 2
# 服务端
koa 2
koa-router 12
# 环境
node v16.15.0
npm v8.5.5
复制代码正文结束。点击查看代码变更
闲言碎语
element-plus or ant-design-vue ?
element-plus 是 element-ui 专门针对 vue3 出的版本。element-ui 和 ant-design-vue 都是极其优秀的框架，这俩框架我都有两年左右的实战项目经验。两者内含的常用组件不能说是雷同，简直是一摸一样。作为 ui 框架，主要的差异还是 ui 层面的。
选择 element-ui 也是因为先入为主，要知道在 2018 年启动这个项目时我甚至都没听说过 ant-design-vue
less or sass ?
其实我从事前端的前几年主要是在用 sass 的，官网号称其是世界上最成熟、稳定和强大的 css 扩展语言，实至名归，支持的特性确实多。但安装起来咋就那么曲折呢，那个 node-sass 真是安一次，恼火一次。
后来接触了 less，虽然没 sass 功能强大，但常用的变量，嵌套，mixin，函数等特性足够用了啊，而且如此轻便，果断弃 sass，全面转向 less。
axios or fetch ?
两者的特性差异我倒是没研究过。不过我知道 fetch api 在浏览器环境有，在 node 环境却没有，为了获得一致的开发体验，强迫症的我还是选择 axios
vue-router 的 history 模式 or hash 模式 ？
一句话，我选 history 模式纯粹是为了 url 美观。
The hash mode uses the window's hashchange event to monitor changes in the hash part of the url, so as to match the corresponding routing view. The hash part of the url will not be sent to the server, so this mode is completely maintained by the front end, and the server does not need any processing. The disadvantage is that it is not friendly to SEO, and the url is ugly.
The history mode takes full advantage of the history.pushState API to implement URL jumps without reloading the page. In this mode, the url is the normal url, but this normal url is requested by the server when the page is loaded, so if the server is not configured, 404 will appear. To solve this problem, you need to add a simple fallback route to the server. Returns index.html if the URL does not match any static resources.