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

  • 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. LGP5544题解

    题目大意 题意这么明显就不说了qwq 首先最值,而且也想不到啥解法,果断 \(\rm SA\). 然后是初始位置.初始位置就是 \(((\sum_{i=1}^m x)/m,(\sum_{i=1}^m ...

  2. 保姆级SpringBoot+Vue图片上传到阿里云OSS教程

    小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...

  3. SpringBoot---Eclipse编辑yml文件不能自动提示的问题(Eclipse安装插件STS)

    在学习了几天SpringBoot之后,刚开始跟着别人的博客使用的是IDEA,后来跟着视频学,讲师用的eclipse,便跟着用了,但是发现在编辑yml配置文件的时候,没有自动提示的功能,百度之后发现是没 ...

  4. 前端好用API之Fullscreen

    前情 在前端开发需求中,特别网页有视频需求时,需要做视频全屏功能,或者在某些可视化大屏项目也要做全屏. Fullscreen介绍 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占 ...

  5. CF736D Permutations(伴随矩阵)

    CF736D Permutations(伴随矩阵) Luogu 题解时间 首先把边直接放进邻接矩阵, 很明显行列式的奇偶和方案数的奇偶一样. 设 $ A_{ i , j } $ 为矩阵的该行列的余子式 ...

  6. SpringAOP 失效解决方案、Spring事务失效

    SpringAOP 失效解决方案 SpringAOP是基于代理来对目标方法进行增强,但是有的时候又会出现"增强无效"的情况,比如在@Transactional下的某类中的方法内调用 ...

  7. ruoyi首次使用常见问题的解决方案

    1.导入项目之后,下载依赖包之后,模块的依赖项飘红(我这里无法复现,当参考图吧) 解决方法: 2.ruoyi框架代码生成之后,需要自己进行替换到指定位置.相应的官方文档位置,否则,可能会出现404,访 ...

  8. C# 如何让new 出来的form显示在最外层?

    /// <summary> /// 显示比对不同点的位置 /// </summary> public void showDiffImage() { //在此处弹出不一样图 Bi ...

  9. Spring基于xml注入bean的几种方式?

    (1)Set方法注入: (2)构造器注入:①通过index设置参数的位置:②通过type设置参数类型: (3)静态工厂注入: (4)实例工厂:

  10. 给定一个文件每一行是字符串,找出所有的逆序对,比如abc和cba是逆序的对

    1 #include<iostream> 2 #include<string> 3 #define MAX 100 4 using namespace std; 5 bool ...