简单实用的vue常用后台管理模板框架「建议收藏」

大家好，欢迎来到IT知识分享网。

👦分享一些基于vue的一些简单实用企业中后台管理系统，助你在项目中快人一步。看完记得👍❤

👶环境准备—node.js安装

首先要先确定本地是否已经安装过了node.js。WIN+R打开cmd命令行，输入node，会显示node.js的版本则表明本地已经装过了，不需要重复安装。

提示不是本地命令则需要先安装node.js。官网地址https://nodejs.org/en/。

后面就是一直next就行了。假如你是个新手的话，可能会困惑我学vue为什么要安装node.js，这篇文章可能会对你理解他们的关系有帮助🙋‍♀️不懂装懂系列——node、npm、webpack和vue之间的联系

🧑搭建vue-element-admin

node.js安装完成之后，进入cmd命令行，切换到安装目录

cd 打算安装vue-element-admin的目录
//cd命令只能切换到c盘下面的目录，假如要切换到d盘直接输入‘d:’，再切换到d盘下的其他盘‘cd d:打算安装vue-element-admin的目录’

git clone https://github.com/PanJiaChen/vue-element-admin.git
// 克隆项目

cd vue-element-admin
// 进入项目目录

npm install
// 安装依赖

npm run dev
//本地开发 启动项目

启动之后便会自动在浏览器打开本地项目

登录页面

主页面

这样你的第一个vue中后台管理系统就搭建成功啦

👧搭建vue-manage-system

git clone https://github.com/lin-xin/vue-manage-system.git  
//克隆到本地    

cd vue-manage-system    
//切换到项目目录

npm install 
//安装项目依赖

npm run serve 
//启动开发调试服务器

npm run dev
//启动项目	

浏览器输入出现的url http://localhost:3000/即可查看项目内容

👨‍🦰vue-cli

假如你觉得这些组件满足不了你的需求，想自己动手开发，可以选择vue提供的脚手架vue-cli，他为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

npm install -g @vue/cli
//安装vue-cli

vue init webpack my-progect
//初始化项目，生成项目模板 my-progect是自定义的项目名称

cd:demo
//切换到项目目录

npm install
//安装包依赖

npm run dev
//运行项目

浏览器输入这个地址即可，这样vue-cli就搭建好啦

👼淘宝镜像安装

npm install -g cnpm egistry=https://registry.npm.taobao.org
因为在国内的原因可能有时候npm安装会失败，可以选择使用cnpm，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm，淘宝团队做的国内镜像，然后上面的npm xxx操作就可以用cnpm xxx代替了，但是启动项目的npm run dev不能用cnpm run dev代替

👼yarn安装

npm install -g yarn
yarn是facebook发布的一款取代npm的包管理工具。yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。

对了还有一件事

别忘了三连👍👍👍
别忘了三连👍👍👍
别忘了三连👍👍👍