企业应用架构研究系列二十七:Vue3.0 之环境的搭建与Vue Antd Admin探索
开发前端需要准备一些开发工具,这些工具怎么安装就不详细描写了,度娘一些很多很多。主要把核心的开发工具列表一些,这些资源也是非常容易找到和安装的。
- Node 安装:https://nodejs.org/en/ 安装LTS版本,验证安装成功:node -v ; npm -v
- Typescript 安装:npm install typescript -g 验证安装成功:tsc -v
- Yarn 安装:npm install -g yarn 验证安装成功:yarn -v
- Vue3.0 以及相关工具安装:npm install vue@next ;npm install -D @vue/compiler-sfc;yarn global add @vue/cli;
设置NPM包镜像地址,更改成淘宝镜像:npm config set registry=https://registry.npm.taobao.org,执行检查:npm config list
Windows10 安装Typesscript 的时候可能会遇到一个小坑,需要把RemoteSigned 打开,需要执行一个PowerShell 语句:set-ExecutionPolicy RemoteSigned,安装完毕后,按照下图检查,第一阶段前端开发必须条件安装完毕。

安装完相应的前端开发工具,现在开始研究一下开源的前端框架,我推荐先研究“Vue Antd Admin” 这个不错的框架,省去了很多不必要的开发。首先clone 下来源码:git clone https://github.com/iczer/vue-antd-admin,下载 完毕后,进入文件夹,先按照文档提示,先运行起来,看看效果。打开PowerShell 工具,运行:$ yarn install; $ yarn serve
运行后效果如下图,感觉界面风格比较中规中矩,适合大部分的管理平台。后面讲对该框架进行逐步的探索。


企业应用架构研究系列二十七:Vue3.0 之环境的搭建与Vue Antd Admin探索的更多相关文章
- 企业应用架构研究系列十九:Docker开发环境
软件行业流行这样一个说法,由于Docker 技术的成熟和该技术被广大厂商的普遍应用,成就了微服务领域的快速成长,衍生了云原生技术和公有云的进一步推广.我个人认为Dockers 技术.微服务技术.云原生 ...
- 企业应用架构研究系列二:MSF&Scrum 项目管理
从业软件项目这么多年,在企业应用开发项目中,项目能否成功,是否能按照项目计划有效的推进,是有很强的一套项目管理理论.最早的时候,接触的项目管理的方法论就是微软的MSF(Microsoft Soluti ...
- 企业应用架构研究系列二十八:身份认证 Beginning Out With IdentityServer4
在.Netcore 技术栈中,一直在使用了开源组件IdentityService4进行身份管理,其功能的强大和易用性的确很受开发者喜欢,但是最近其开源组织Duende Software 开始对其进行商 ...
- 企业应用架构研究系列二十六:信号量SemaphoreSlim与Semaphore
在进行多线程程序的开发和设计的过程中,不可避免的需要引入semaphore信号量这个组件,这是.net框架提供的一个对多线程计数互斥的方案,就是允许指定的线程个数访问特定的资源而增加的 一个" ...
- Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- [CXF REST标准实战系列] 二、Spring4.0 整合 CXF3.0,实现测试接口(转)
转自:[CXF REST标准实战系列] 二.Spring4.0 整合 CXF3.0,实现测试接口 文章Points: 1.介绍RESTful架构风格 2.Spring配置CXF 3.三层初设计,实现W ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- vue3.0+vite+ts项目搭建-axios封装(六)
封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...
随机推荐
- 使用vscode Container开发调试envoy
由于我最近在研究 envoy 这个项目,这是个cpp的项目,对于我这种cpp新人来说还是比较有压力的,感觉处处都是坑,开个引导文章记录一下. 如果要研究 envoy 项目源码,那肯定是需要代码跳转的, ...
- Dapr 官方文档中文翻译 v1.5 版本正式发布
作者:敖小剑 - Dapr Approver 经过 Dapr 中国社区十余位贡献者一个多月的努力,Dapr 官方文档中文翻译 v1.5 版本完成翻译和审校,正式发布并上线 Dapr 官网. 访问方式 ...
- spring——通过注解显式的完成自动装配
构建bean文件: public class People { private String name = "小明"; } 编写配置类: @Configuration @Impor ...
- 从SpringBoot到SpringCloudAlibaba简明教程(一):初识SpringBoot及其基础项目构建
前言 Spring框架的大名想必大家早已如雷贯耳,我们来看一下springboot诞生的初衷,以及它在springframe的基础上解决了哪些痛点. 很久以前,J2EE还是java企业级应用的标准规范 ...
- kubernetes证书过期处理
rancher中文文档:http://docs.rancher.cn/ k8s中文文档:https://kubernetes.io/zh/docs 一.修改kubeadm 源码 增加证书到100年 $ ...
- [WC2016]挑战NPC(一般图最大匹配)
[WC2016]挑战NPC(一般图最大匹配) Luogu 题解时间 思路十分有趣. 考虑一个筐只有不多于一个球才有1的贡献代表什么. 很明显等效于有至少两个位置没有被匹配时有1的贡献. 进而可以构造如 ...
- uniapp小程序图片前端压缩上传
目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线 ...
- 什么叫 CC 攻击?什么叫 DDOS 攻击?
CC 攻击,主要是用来攻击页面的,模拟多个用户不停的对你的页面进行访问,从而使你的系统资源消耗殆尽.DDOS 攻击,中文名叫分布式拒绝服务攻击,指借助服务器技术将多个计算机联合起来作为攻击平台,来对一 ...
- bash shell 中的 hash 命令有什么作用?
linux 命令'hash'管理着一个内置的哈希表,记录了已执行过的命令的完整路径,用该命令可以打印出你所使用过的命令以及执行的次数. [root@localhost ~]# hashhits com ...
- 百度地图Api使用常见问题
引用 百度地图API文档 百度地图使用文档 使用 LocalSearch 控件搜索出来的Marker无法点击的问题或者导致第一个Marker标注的信息框关闭后Label消失 解决方法就是使用 onMa ...