前言
本文记录一次使用Vue开源项目的过程。
寻找Vue开源项目
要使用Vue开源项目就必须先找到一个,我们去Github上搜索【后台】,然后使用Vue分类进行检索,找到排名第一的开源框架进行下载—vue-framework-wz
![](https://i-blog.csdnimg.cn/blog_migrate/aeff3459ccb46a9393973dd218c9938c.png)
然后新建一个文件夹,将下载解压后的文件放进去,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/e1642f1b72b70b7a8e1b095d9bea99cb.png)
运行项目
运行CMD,输入【cd /d F:\Vue\vue-framework-wz-master】
然后输入【npm install】 ,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/4aed77f5c1e16ee21f465d6696f4e7a0.png)
然后耐心等待其下载依赖项。
然后,得到结果缺少Python环境,安装失败。。。
![](https://i-blog.csdnimg.cn/blog_migrate/d44f8d1bf9e880d7742180dc7c51f61e.png)
解决方案:先安装windows-build-tools——windows构建工具,如下。
npm install --global --production windows-build-tools
npm install -g node-gyp
安装windows-build-tools时需要使用【管理员权限的CMD】,不然会提示【Please restart this script from an administrative PowerShell!】
![](https://i-blog.csdnimg.cn/blog_migrate/c37d9e0ffd83cc8e67fe3125c5e69746.png)
安装完windows-build-tools和node-gyp后,从新运行一个管理员权限的CMD窗口,再从新运行【F:\Vue\vue-framework-wz-master>npm install】初始化项目。
npm run dev
初始化成功后,运行npm run dev,启动nodejs的服务器,运行网站,结果如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/a4a83e92877d160584f81e1adb6af08b.png)
输入账号密码,进入后台管理页面,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/1dbba2dd473c78b0c24fb31a505c6115.png)
注:想要CMD执行npm开头的命令,需要先安装Nodejs。
调试项目
首先我们安装Visual Studio Code,然后使用文件—打开文件夹,然后找到我们刚才的项目路径,然后打开项目。
![](https://i-blog.csdnimg.cn/blog_migrate/2ee6259bd6fbc78defeb32f3795273b1.png)
然后找到后台首页默认显示的仪表盘的网页,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/84dd68dfc3334dd1b8d269ebd5edeb8a.png)
然后修改页面的Header。
![](https://i-blog.csdnimg.cn/blog_migrate/3051cfd38bfb69ff9dca03369074e49b.png)
然后重新回到刚刚的网页。
![](https://i-blog.csdnimg.cn/blog_migrate/a79f381f32235a7936ec23d5f8280994.png)
到此Vue开源项目使用探索结束。
----------------------------------------------------------
注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
若您觉得这篇文章还不错,请点击下方的【推荐】,非常感谢!
https://www.cnblogs.com/kiba/p/13596436.html
![](https://i-blog.csdnimg.cn/blog_migrate/db56d30d4b461eb0917aae92298eedca.png)