vue3 组件学习

2-1

prettier安装

prettier配置文件  (.prettierrc)

{
  "semi": false,  //是否要写分号
  "singleQuote": true, //是否使用单引号
  "arrowParens": "always",  //是否要单参数函数是否要加括号 `(x) => x`
  "trailingComma": "all"
}

用户会应用于所有项目,工作区应用于当前项目

提取props, 

有问题的

加上下面as

//variables.scss
$menuActiveText:#409EFF;
$sideBarWidth: 210px;

:export {
  menuActiveText: $menuActiveText;
  sideBarWidth: $sideBarWidth;
}




script 引入
import variables from '@/styles/variables.scss'
computed: {
    variables() {
      return variables
    },
}


组件使用
<div :active-text-color="variables.menuActiveText">...</div>


还有一种方式,通过style引入
<style lang="scss" scoped>
@import "~@/assets/scss/variables.scss";
.flow-status {
  color: #{$red};
}

坑

vant popup 弹窗无效 官网v-model

解决:需要vue3 新写法

v-model:show="show"