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

目录

一、简介

二、创建项目

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 的缩写......