arco.design前端框架運用總結

前些日子，工作的時候用到了arco.design這個前端框架，怎么來說呢，頁面樣式呢做的挺好看的，框架使用方法也還行。只不過，框架目前感覺還不太穩定，有些內容，這次用了，下次就變了，也只能說，升級挺頻繁的。

還有就是，好些個內容還有缺失，需要不斷的完善。像地圖、拖拽、編輯器，目前框架里還沒有，像這些都是引用比較頻繁的，而且做后台框架，一款好看、簡單又實用的編輯器真的非常的需要。目前網上這款框架好像應用的還不太多，百度搜搜例子吧，少之又少。

框架分了react和vue兩種，還加入了暗黑模式，這個是比較不錯的。

下面是使用框架后的小總結

1、a-dropdown下拉菜單

a-dropdown 里必須是一個內容包起來，否則添加的內容不顯示

例子：

否則像下面這個span是不顯示的：

2、圖標 stroke-width設置圖標的線性寬度

圖標的stroke-width前需要加：，否則會有警告

3、跳轉鏈接

目前沒發現加不加path路徑有什么區別，反正是都能實現跳轉

@click="$router.push({ name: 'info' })"

@click="$router.push({ path: 'form', name: 'step' })"

在router文件夾是每創建一個新頁面，都會定義path和name，跳轉通過這兩個內容實現。

4、新增一個模塊和頁面需要動哪些文件

（1）ewechat_admin\src\views\ 增加你所要添加的一個模塊內容（包含子頁面、語言包）

（2）ewechat_admin\src\api\ 增加調用接口數據文件

（3）ewechat_admin\src\router\modules\ 增加所添加模塊內容的path等信息內容，如3中上圖所示

（4）ewechat_admin\src\router\index.ts文件中引入所增加的模塊（模塊中的子頁面不用動）

5、增加語言包

在ewechat_admin\src\locale\zh-CN.ts 引入所增加的語言包，注意在下面的export default里也需要引手

6、調用語言包中的內容，需要用$t(‘’)包起來使用

頁面中直接調用

  
  
  
          
            {{ $t('welcomeWords.page.tab1') }} 
          

組件中調用

<組件名稱 :title="$t('welcomeWords.page.tab1')">

7、語言包中注釋添加

在語言包中添加的注釋需要在//后空一格，否則會報錯

例如：// 注釋內容，否則：//注釋內容會報錯

8、修改顏色

需要修改light和dark兩種情況下顏色

引用

body {
	--color-fcfcfc: #fcfcfc;
}
body[arco-theme='dark'] {
	--color-fcfcfc: rgba(255, 255, 255, 0.02);
}
.div-card{
	background-color: var(--color-fcfcfc);
}

9、頁面中修改樣式:deep用法

:deep(修改的class或ID)，括號里只能寫一個class名字，否則后面的不起作用

:deep(.arco-menu-item){
	line-height: 50px;
}