前言

本文记录一次使用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. synchronized的锁升级/锁膨胀

    偏向锁 偏向第一个拿到锁的线程. 即第一个拿到锁的线程,锁会在对象头 Mark Word 中通过 CAS 记录该线程 ID,该线程以后每次拿锁时都不需要进行 CAS(指轻量级锁). 如果该线程正在执行 ...

  2. 连接云MariaDB实例

    新建实例 MariaDB CVM 内网连接 CVM远程登录测试(同一个VPC下): CVM安装客户端: yum install mysql 连接: mysql -h MariaDB内网ip -u 数据 ...

  3. 从jdbc到spring-boot-starter-jdbc

    从jdbc到spring-boot-starter-jdbc jdbc 是什么 JDBC是一种用于执行SQL语句的API,可以为多种关系数据库提供统一访问,它是由一组用Java语言编写的类和接口.是J ...

  4. 03-注释与API文档

    1.注释:Comment分类: 单行注释:// 多行注释:/* */ 文档注释:/** */作用: ① 对所写的程序进行解释说明,增强可读性.方便自己,方便别人 ② 调试所写的代码特点: ①单行注释和 ...

  5. ACL2020 Contextual Embeddings When Are They Worth It 精读

    上下文嵌入(Bert词向量): 什么时候值得用? ACL 2018 预训练词向量 (上下文嵌入Bert,上下文无关嵌入Glove, 随机)详细分析文章 1 背景 图1 Bert 优点 效果显著 缺点 ...

  6. swift基础_ set get方法 理解

    swift中重写set get方法是这样的. 先定义一个变量,当调用set方法的时候,系统会有一个newValue, 将newValue赋值给我们定义的变量,然后从get方法返回去. swift中一般 ...

  7. windows下Nginx+RTMP部署

    在windows下部署参考博客:https://blog.csdn.net/l1028386804/article/details/80022437 参考这个部署完成后,一般没有什么问题,可以看到视频 ...

  8. Java基础—字符串

    事实上,Java是没有内置的字符串类型的,而是在标准Java类库中提供了一个预定义类String.每个用双引号括起来的字符串都是String类的一个实例: String str = "&qu ...

  9. CSS 定位总结

    目录 元素显示模式 元素模式 元素显示模式转换 CSS定位机制 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed 粘性定位sticky 定位小结一图流 CS ...

  10. vue+element树形结构右键菜单

    环境:vue-admin-template   vue 2.6.10 element-ui 2.7.0 1.自定义组件,文件位置:src/components/mentContext <temp ...