一、简介

二、创建项目

1.配置环境

2.安装

三、了解项目

1.技术栈

2.差异（对比我之前使用的技术栈）

四、总结

一、简介

官网：Arco Design - 企业级产品的完整设计和开发解决方案

这是由字节跳动出品的企业级设计系统，有着完善的设计开发资源，可以快速上手！

二、创建项目

1.配置环境

先确认本地环境中安装好了 node， git，然后通过下面命令安装 arco cli

npm i -g arco-cli

2.安装

打开终端，执行项目初始化命令（hello-arco-pro是项目名，可以改成别的）

arco init hello-arco-pro

React版本（需要同时安装 react >= 16.8 和 react-dom >= 16.8）

Vue版本（vue >= 3.2.0）

我使用Vue语言，通过键盘下键选择vue并回车。

项目类型选择最后一个（如上图）

如上图，如果看到依赖安装失败，就进到项目目录，执行下面命令

npm install --ignore-scripts

这样就安装好啦！运行命令为

npm run dev

三、了解项目

1.技术栈

vue(3.2.31) + ES2015（ES6）+ + TypeScript(4.5.5) + Arco Design 和 echarts(5.2.2)等

vue3中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

2.差异（对比我之前使用的技术栈）

以前一直在用 vue2 + js + echarts + element-ui 等

①vue3与vue2

vue3相比于vue2，有很多变化，比如 vue2 中采用选项式 api ，而 vue3 新增了组合式 api，有效提高代码的可读性和可维护性；vue3对ts有着更好的支持；vue2 中，每个模板必须有一个根节点，否则就会报错，vue3 中可以不需要根节点，多个元素或标签可并列存在；vue3 移除了inline-template、filter 等不常用的API，使用 tree-shaking。

②es、js、ts 的关系

JavaScript的标准是ECMAScript

TypeScript通过在JavaScript的基础上添加静态类型定义构建而成，扩展了 JavaScript 的语法，因为ts是js的超集,所以可以在ts中使用原生js语法。

ECMAScript是语法标准规范

③Arco Design

Arco Design有着完善的基础组件，足以支撑绝大多数的业务需求，同时，Arco 在这些基础组件的设计上，也开放了细粒度的配置，方便后续拓展。

四、总结

其实这个项目上手还是容易的，没有遇到什么大问题，只是遇到一些没了解到的语法，这里记录一下，虽然都是一些小知识点，但对于前端小白一定有帮助！

1.编译警告问题

这些警告真的好烦，一出来就是好多行

打开.eslintrc.js 发现 rules 中有 'prettier/prettier': 1

原来是进行了代码格式检查！所以将其关闭就可以啦！

2.es语法

在代码中会看到总是出现 const { chartOption } = useChartOption（...）;

问：为什么在chartOption外面套个大括号？

答：这是ES6简写形式，相当于const chartOption = useChartOption(...).chartOption;

3.vue语法

在项目中看到<template #title>，比较好奇这种写法，到vue官网一看，# 是 v-slot 的缩写......

Arco Design - 企业级产品的完整设计和开发解决方案相关推荐

Ant Design Landing 产品首页的设计神器
Ant Design Landing 产品首页的设计神器 Ant Design Landing 是针对产品首页的解决方案,我们秉承 Ant Design 的设计价值观,延用 Ant Design 的 ...
PMCAFF | 产品经理如何设计敏捷开发流程？
作者 | 耗子吴最小可行化产品硅谷创业家 Eric Rise 在其著作 <精益创业> 一书中提出了 "精益创业"(Lean Startup)的理念,其核心思想是,开 ...
企业级Web应用用户界面设计杂谈[转]
原文链接:http://www.iteye.com/topic/133373 第一章:UI浅论问题:什么是UI,什么又是UI设计师? 在我的职业生涯中,听到的最多的字眼就是"美化一下&qu ...
游戏平台SDK设计和开发之旅——XSDK功能点梳理
做游戏开发或者相关工作的同学,可能都知道,在游戏上线之前,需要将游戏分发到各大渠道平台,比如九游,百度,360,华为等等.其中和技术相关的事情,就是要在游戏中接入这些渠道平台的平台SDK,平台SDK中 ...
字节跳动开源 Arco Design
ArcoDesign 简介 ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统.在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,我们开源了 Arco ...
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班从零到壹全栈部落产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...
研发质量管理_企业级产品研发管理体系的构建
产品管理对于希望以产品制胜的企业来说都显得至关重要,所以大部分企业现在普遍更多关注单个产品的管理.这在单品制胜时代是非常有用的,然而,在解决方案产品时代我们除了关注单产品之外,企业级产品研发管理就显得 ...
第七节并行工程与企业级产品数据管理
第七节并行工程与企业级产品数据管理进入八十年代以来,计算机技术在各行各业得到了越来越广泛应用,产品开发领域由此也引发了一系列的变革,并行工程(ConcurrentEngieering,CE)和企业 ...
优秀的数据产品是怎样设计出来的？
正文开始导读:常规的数据产品有三种类型:用户数据产品.商用数据产品及企业数据产品.本文将详细介绍它们的设计思路及优秀的代表产品.在提供广阔知识面的同时,也希望帮助产品经理们了解数据行业的全貌,知道其 ...

Arco Design - 企业级产品的完整设计和开发解决方案

一、简介

二、创建项目

1.配置环境

2.安装

三、了解项目

1.技术栈

2.差异（对比我之前使用的技术栈）

四、总结

Arco Design - 企业级产品的完整设计和开发解决方案相关推荐

最新文章

热门文章