02 要想项目跑，轮子不可少

想要项目快速迭代，轮子必不可少。normalize.css，element-plus，axios，moment，vue-router，less，前端必知必会的轮子你都知道吗？

浏览器默认样式统一 normalize.css

npm i normalize.css

只需在 src/main.js 中加一行即可

import 'normalize.css'

这个库主要做的事是统一浏览器默认样式，而非清除浏览器默认样式。所以像 h1，h2，strong 这种自带样式的标签仍然保留着样式，body 的 margin 统一成了 0

UI 框架 element-plus

npm i element-plus

由于是全栈开发，产品 -> UI -> 前端 -> 后端 -> 数据库，写代码我还行，ps 和 skecth 实在是力不从心啊，搞一个 UI 框架是必要的。

关键代码

import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
app.use(ElementPlus)

由于是要在整个项目中用，并且 element-plus 提供的大多数组件都要被用到。这里就直接简单粗暴的完整引入。

当然在具体的项目中也可以根据实际情况按需引入

网络请求 axios

npm i axios

import axios from 'axios'
window.axios = axios

我身为一个前段开发师，定义几个全局变量很合理吧

日期处理 moment

npm i moment

import moment from 'moment'
window.moment = moment

正如我刚才所说，moment 每个页面到处都在用，定义成全局变量也很合逻辑

SPA 路由 vue-router

npm i vue-router

vue 的官方路由，不需要解释。

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [],
})
app.use(router)

在添加了前端路由之后才真正算是正式开工了

接下来就可以一个页面一个页面地稳步前进啦

css 预处理器 less

npm i less

在 vue 的 sfc 里就可以用 less 啦

<style lang="less"></style>

最后

把 vite 脚手架生成的一些 hello world 示例代码清理一下

新建一个首页路由

{
  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 美观。

hash 模式利用 window 的 hashchange 事件监听 url hash 部分的变化，从而匹配到对应的路由视图。url 的 hash 部分是不会发送到服务器的，所以这种模式完全由前端维护，服务器无需任何处理。缺点就是对 SEO 不友好，url 也比较丑陋。

history 模式充分利用了 history.pushState API 在实现 URL 跳转的同时不重新加载页面。这种模式下 url 就是正常的 url，但是这种正常的 url 在加载页面时走服务器请求，所以如果服务器不配置的话会出现 404，要解决这个问题需要在服务器添加一个简单的回退路由，在 URL 不匹配任何静态资源的情况下，返回 index.html。

标签：02,vue,不可,element,moment,axios,plus,轮子,router
来源： https://www.cnblogs.com/iovec/p/16603513.html