Vue开源项目使用探索

前言

本文记录一次使用Vue开源项目的过程。

寻找Vue开源项目

要使用Vue开源项目就必须先找到一个，我们去Github上搜索【后台】，然后使用Vue分类进行检索，找到排名第一的开源框架进行下载—vue-framework-wz

然后新建一个文件夹，将下载解压后的文件放进去，如下图：

运行项目

运行CMD，输入【cd /d F:\Vue\vue-framework-wz-master】

然后输入【npm install】 ，如下图：

然后耐心等待其下载依赖项。

然后，得到结果缺少Python环境，安装失败。。。

解决方案：先安装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!】

安装完windows-build-tools和node-gyp后，从新运行一个管理员权限的CMD窗口，再从新运行【F:\Vue\vue-framework-wz-master>npm install】初始化项目。

npm run dev

初始化成功后，运行npm run dev，启动nodejs的服务器，运行网站，结果如下图：

输入账号密码，进入后台管理页面，如下图：

注：想要CMD执行npm开头的命令，需要先安装Nodejs。

调试项目

首先我们安装Visual Studio Code，然后使用文件—打开文件夹，然后找到我们刚才的项目路径，然后打开项目。

然后找到后台首页默认显示的仪表盘的网页，如下图：

然后修改页面的Header。

然后重新回到刚刚的网页。

即不用重启Nodejs服务器，也不用编译，可以看到我们的修改内容已经被更新了。

Vue项目目录学习参考网址—https://www.runoob.com/vue2/vue-directory-structure.html

----------------------------------------------------------

到此Vue开源项目使用探索结束。

----------------------------------------------------------

注：此文章为原创，任何形式的转载都请注明出处！