前言

本文记录一次使用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.cnblogs.com/kiba/p/13596436.html

Vue开源项目使用探索的更多相关文章

  1. 超全的 Vue 开源项目合集,签收一下

    超全的 Vue 开源项目合集,签收一下 xiaoge2016 前端开发 1周前 作者:xiaoge2016 链接: https://my.oschina.net/u/3018050/blog/2049 ...

  2. 20 个新的且值得关注的 Vue 开源项目

    译者:前端小智作者:Nastassia Ovchinnikova来源:flatlogic.com 个人专栏 ES6 深入浅出已上线,深入ES6 ,通过案例学习掌握 ES6 中新特性一些使用技巧及原理, ...

  3. 30个值得关注的Vue开源项目

    译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...

  4. 2018年最值得关注的30个Vue开源项目

    译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...

  5. Vue开源项目汇总(史上最全)(转)

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  6. vue开源项目有点全

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★31142 - 饿了么出品的Vue2的web UI工具套件 Vux ★14104- 基于Vue和 ...

  7. 操作PDF文档功能的相关开源项目探索——iTextSharp 和PDFBox

    原文 操作PDF文档功能的相关开源项目探索——iTextSharp 和PDFBox 很久没自己写写心得日志与大家分享了,一方面是自己有点忙,一方面是自己有点懒,没有及时总结.因为实践是经验的来源,总结 ...

  8. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  9. 如何运行vue项目(从gethub上download的开源项目)

    前提:入坑vue.js,从GitHub上download一个vue.js的开源项目,发现不知如何在浏览器运行,通过查阅网上教程,发现网上的很多是教你怎么新建项目,并没有一个是教如何打开已有的项目.自已 ...

随机推荐

  1. 5.5 省选模拟赛 B Permutation 构造 贪心

    LINK:Permutation 对于这种构造神题 我自然是要补的.为啥就我没想出来哇. 30分还是很好写的 注意8!实际上很小 不需要爆搜 写bfs记录状态即可.至于判断状态是否出现与否 可以开ma ...

  2. 10分钟 Castle.Windsor 适配 Asp.Net Core 3.0

    Asp.Net Core 3.0以上,不再能通过修改Starup.ConfigureServices返回值(IServiceProvider),所以只能调用IHostBuilder.UseServic ...

  3. 004_自己尝试go语言中的方法

    go语言可以给任意类型定义方法,我在学习过程中,一开始一头雾水,但是随着理解的深入,现在也大概知道了什么叫做方法 之前的一些例子其实讲的并不是特别生动,下面我用一个生动的例子演示一下 首先提出需求.我 ...

  4. Django 环境下常用的模型设计

    Django 环境下常用的模型设计 用户表 继承 django.contrib.auth.model import AbstractUser AbstractUser 默认已经包含了很多字段了 id ...

  5. java中threadlocal的理解

    [TOC] #java中threadlocal的理解##一.threadlocal的生命周期和ThreadLocalMap的生命周期可以吧TreadLocal看做是一个map来使用,只不过这个map是 ...

  6. MySQL数据库——连接查询

    1.基本含义 连接就是指两个或2个以上的表(数据源)“连接起来成为一个数据源”. 实际上,两个表的完全的连接是这样的一个过程: 左边的表的每一行,跟右边的表的每一行,两两互相“横向对接”后所得到的所有 ...

  7. Linux下gcc/g++中-I(i的大写)、-L和-l

    -I(i的大写)include头文件非标准库中存在的也不是在当前文件夹下的,需要将地址用-i(大写)包含例:-I /home/src/-L用到的函数或操作非标准库下的,需要将库存在的地址用-L包含,库 ...

  8. 2020-05-29:redis怎么保证高可用,高可用模式有那些?对比下优缺点?

    福哥答案2020-05-29: Redis 高可用架构如下:1.Redis Sentinel 集群 + 内网 DNS + 自定义脚本.2.Redis Sentinel 集群 + VIP + 自定义脚本 ...

  9. JavaScript - async/await 基础示例

    一个函数如果被 async 修饰,无论内部是否有 await的异步操作,都会返回一个 Promise 对象 demo 1 async function basicAsync() { let resul ...

  10. 快速入门Mybatis

    框架概述 什么是框架 它是我们软件开发中的一套解决方案,不同的框架解决的是不同的问题.使用框架的好处:框架封装了很多的细节,使开发者可以使用极简的方式实现功能.大大提高开发效率 三层架构 UI(表现层 ...