vue后台管理系统搭建

最新推荐文章于 2025-07-01 00:30:00 发布

管火火火

最新推荐文章于 2025-07-01 00:30:00 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发前端开发问题记录文章标签：前端 vue web前端 elementUI 框架

本文链接：https://blog.youkuaiyun.com/weixin_38373875/article/details/87872506

本文档介绍如何使用vue框架和vue-cli搭建一个后台管理系统。首先，通过安装和配置npm、cnpm以及nodemon来预备项目。然后，通过vue-cli创建webpack项目，并进行相关设置。接着，安装并配置element-ui以增强界面。最后，详细讲述了项目的启动、打包过程，以及解决自动打开浏览器和静态资源部署的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

软件架构
软件架构说明：本项目使用vue框架，写的一个后台管理系统

使用说明
**项目开始之前,**先安装npm 将taobao作为镜像文件,切换到到cnpm,步骤如下:

前提 node.js中已经包含了npm，需要检测npm安装好了没有
0. npm -v
0.1 npm install npm -g 升级npm

npm i nrm -g

nrm ls

nrm use taobao||cnpm

cnpm i nodemon -g

检测 nodemon -v

如果没有cnpm 安装npm i cnpm -g 安装了nodemon 启动文件的方式:nodemon index.js

项目开始预备
vue-cli脚手架工具

vue-cli是官方的一个脚手架工具，所谓脚手架就是一个架子，项目结构的架子，它里面包含一些最基本的脚本结构设置。利用vue-cli，我们可以生成这样的一个脚手架，所以就被成为脚手架工具。

npm install vue-cli -g 下载全局脚手架

vue init webpack vue_admin 使用脚手架初始化webpack项目

注意在初始化过程中，除了vue-router输入y之外其余的一律是n

cd vue_admin进入初始化项目

npm run dev运行vue项目

不能自动打开浏览器的解决方法如下:

进入vue_admin/config/index.js文件，修改dev中的autoOpenBrowser:
true即可,下次在启动就可以自动在浏览器中打开了也可以手动复制链接在浏览器中打开：

手动在浏览器中输入网址http://localhost:8080/#/