前言

 vue-admin-template：一个极简的 vue admin 管理后台，它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。是一个vue轻量级后台管理系统基础模板，预览地址：https://woai3c.github.io/#/login或者https://panjiachen.github.io/vue-admin-template/#/dashboard，如果想使用功能稍微全面一点的Vue后台管理模板，请查阅：vue-element-admin，官网文档是：https://panjiachen.github.io/vue-element-admin-site/zh/，如下所示

  本次我们只演示使用VsCode开发工具下载和运行Vue项目：vue-element-admin

一、首先先简单介绍一下VsCode面板组成

二、利用vue搭建后台管理系统，这边我们直接用半成品来搭建后台管理系统。这边我们首先克隆GitHub项目，项目地址：https://github.com/PanJiaChen/vueAdmin-template，需要安装GitHub插件，搜索GitHub，安装：

 

三、拉取项目

VsCode中，按照步骤：终端——>新建终端，在终端中cd到存放项目的文件夹下面，然后执行命令：git clone https://github.com/PanJiaChen/vue-admin-template.git就可以将项目拉取下来 。

四、vue-admin-template项目结构

五、导入vue-admin-template项目代码到VsCode

 文件——>打开文件夹，导入刚刚clone的vue-admin-template代码

六、执行命令：npm install 下载依赖

打开命令行，切换到上面的解压目录，使用npm install命令，会自动下载项目的依赖（类似于maven项目构建方式，也有类似的pom文件package.json）

 待下载完成层之后，准备运行项目了

七、执行命令：npm run dev  运行项目，(开发环境的方式启动项目，此时会自动触发浏览器打开)

八、访问项目：http://localhost:9528

登录页：   

账号：admin          密码：111111

主页：