开发前端需要准备一些开发工具,这些工具怎么安装就不详细描写了,度娘一些很多很多。主要把核心的开发工具列表一些,这些资源也是非常容易找到和安装的。

  • 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探索的更多相关文章

  1. 企业应用架构研究系列十九:Docker开发环境

    软件行业流行这样一个说法,由于Docker 技术的成熟和该技术被广大厂商的普遍应用,成就了微服务领域的快速成长,衍生了云原生技术和公有云的进一步推广.我个人认为Dockers 技术.微服务技术.云原生 ...

  2. 企业应用架构研究系列二:MSF&Scrum 项目管理

    从业软件项目这么多年,在企业应用开发项目中,项目能否成功,是否能按照项目计划有效的推进,是有很强的一套项目管理理论.最早的时候,接触的项目管理的方法论就是微软的MSF(Microsoft Soluti ...

  3. 企业应用架构研究系列二十八:身份认证 Beginning Out With IdentityServer4

    在.Netcore 技术栈中,一直在使用了开源组件IdentityService4进行身份管理,其功能的强大和易用性的确很受开发者喜欢,但是最近其开源组织Duende Software 开始对其进行商 ...

  4. 企业应用架构研究系列二十六:信号量SemaphoreSlim与Semaphore

    在进行多线程程序的开发和设计的过程中,不可避免的需要引入semaphore信号量这个组件,这是.net框架提供的一个对多线程计数互斥的方案,就是允许指定的线程个数访问特定的资源而增加的 一个" ...

  5. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. [CXF REST标准实战系列] 二、Spring4.0 整合 CXF3.0,实现测试接口(转)

    转自:[CXF REST标准实战系列] 二.Spring4.0 整合 CXF3.0,实现测试接口 文章Points: 1.介绍RESTful架构风格 2.Spring配置CXF 3.三层初设计,实现W ...

  7. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  8. 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  9. vue3.0+vite+ts项目搭建-axios封装(六)

    封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...

随机推荐

  1. 使用vscode Container开发调试envoy

    由于我最近在研究 envoy 这个项目,这是个cpp的项目,对于我这种cpp新人来说还是比较有压力的,感觉处处都是坑,开个引导文章记录一下. 如果要研究 envoy 项目源码,那肯定是需要代码跳转的, ...

  2. Dapr 官方文档中文翻译 v1.5 版本正式发布

    作者:敖小剑 - Dapr Approver 经过 Dapr 中国社区十余位贡献者一个多月的努力,Dapr 官方文档中文翻译 v1.5 版本完成翻译和审校,正式发布并上线 Dapr 官网. 访问方式 ...

  3. spring——通过注解显式的完成自动装配

    构建bean文件: public class People { private String name = "小明"; } 编写配置类: @Configuration @Impor ...

  4. 从SpringBoot到SpringCloudAlibaba简明教程(一):初识SpringBoot及其基础项目构建

    前言 Spring框架的大名想必大家早已如雷贯耳,我们来看一下springboot诞生的初衷,以及它在springframe的基础上解决了哪些痛点. 很久以前,J2EE还是java企业级应用的标准规范 ...

  5. kubernetes证书过期处理

    rancher中文文档:http://docs.rancher.cn/ k8s中文文档:https://kubernetes.io/zh/docs 一.修改kubeadm 源码 增加证书到100年 $ ...

  6. [WC2016]挑战NPC(一般图最大匹配)

    [WC2016]挑战NPC(一般图最大匹配) Luogu 题解时间 思路十分有趣. 考虑一个筐只有不多于一个球才有1的贡献代表什么. 很明显等效于有至少两个位置没有被匹配时有1的贡献. 进而可以构造如 ...

  7. uniapp小程序图片前端压缩上传

    目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线 ...

  8. 什么叫 CC 攻击?什么叫 DDOS 攻击?

    CC 攻击,主要是用来攻击页面的,模拟多个用户不停的对你的页面进行访问,从而使你的系统资源消耗殆尽.DDOS 攻击,中文名叫分布式拒绝服务攻击,指借助服务器技术将多个计算机联合起来作为攻击平台,来对一 ...

  9. bash shell 中的 hash 命令有什么作用?

    linux 命令'hash'管理着一个内置的哈希表,记录了已执行过的命令的完整路径,用该命令可以打印出你所使用过的命令以及执行的次数. [root@localhost ~]# hashhits com ...

  10. 百度地图Api使用常见问题

    引用 百度地图API文档 百度地图使用文档 使用 LocalSearch 控件搜索出来的Marker无法点击的问题或者导致第一个Marker标注的信息框关闭后Label消失 解决方法就是使用 onMa ...