新手如何从零开始搭建自己的博客系统： 后台管理-依赖包安装

大家好我是图恩，上节讲到项目初始化，通过vue3的脚手架初始化项目后，通过npm run dev已经能看到项目在运行了。

接下来就到给项目添砖加瓦的时间了，首先项目需要一个组件库，包括输入框，下拉框，按钮等等这些基础的控件，你可以理解为建房子需要的砖块，通过一个一个的小控件就能把页面逐渐的丰富起来。

正常情况下你可以选择不实用组件库，那么你使用Html原生的控件，当然也是可以的，但是原生的控件不仅不好看，开发效率也不高，所以我们一般都选择一套成熟的组件库，比如element-plus，或者ant-design，当然还有其他的一些组件库，只是目前这两个使用人数比较多，所以就这个。

那么为什么要使用使用人数多的组件库呢？由于使用的人多，那么愿意维护的人就相对来说就越多，因为目前这些组件库都是开源的，任何一个人都可以贡献自己的一份力量，那么有缺陷就越容易被发现，从而就越容易被修复。那些使用人数少的组件库说不定哪天就不维护了。

好了，组件库确定之后，那么还要想一想一个后台管理可能会用到哪些插件或者依赖包？以下是我列举的一些基础包供参考：

element-plus: 前端组件库

npm i element-plus -S

axios: 请求库，用来发送请求。

npm i axios -S

wangeditor: 富文本编辑器，就是用来编辑文章的，可以在里面添加文字，图片等等，目前这个编辑器已经停止更新了，不过不妨碍继续使用。

npm i @wangeditor/editor -S
npm i @wangeditor/editor-for-vue -S

基础的就上面这几个就能满足需求了，基本的流程就是打开编辑器，添加文章，点击按钮发布。

从开发角度描述就是：打开页面，页面加载富文本编辑器，输入文字图片后点击按钮，按钮触发点击事件，通过axios发送http请求，调用后端接口，接口将数据插入数据库。

以下是一个package.json的完整内容，供参考：

{
    "name": "vueadminplus",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "run-p type-check build-only",
        "build:only": "run-p build-only",
        "preview": "vite preview --port 4173",
        "build-only": "vite build",
        "type-check": "vue-tsc --noEmit",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
    },
    "dependencies": {
        "@wangeditor/editor": "^5.1.23",
        "@wangeditor/editor-for-vue": "^5.1.12",
        "axios": "^0.27.2",
        "echarts": "^5.4.2",
        "echarts-countries-js": "^1.0.5",
        "element-plus": "^2.2.29",
        "html2canvas": "^1.4.1",
        "lodash": "^4.17.21",
        "pinia": "^2.0.17",
        "vue": "^3.2.37",
        "vue-json-viewer": "^3.0.4",
        "vue-router": "^4.1.3"
    },
    "devDependencies": {
        "@rushstack/eslint-patch": "^1.1.4",
        "@types/node": "^16.11.47",
        "@vitejs/plugin-vue": "^3.0.1",
        "@vitejs/plugin-vue-jsx": "^2.0.0",
        "@vue/eslint-config-prettier": "^7.0.0",
        "@vue/eslint-config-typescript": "^11.0.0",
        "@vue/tsconfig": "^0.1.3",
        "eslint": "^8.21.0",
        "eslint-plugin-vue": "^9.3.0",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.7.1",
        "sass": "^1.54.8",
        "typescript": "~4.7.4",
        "vite": "^3.0.4",
        "vue-tsc": "^0.39.5"
    }
}

本文章由javascript技术分享原创和收集