NPM ?? ??? ???? ?????? ??????. 2. ?? ???? ?? ?? ??? ??? ?????. 3. ???? ?? UI ?????? ??? ??? App.use ()? ??????. 4. ?? UI ???????? Unplugin-auto-Import ? Unplugin-Vue ???? ?? ???? ??????. 5. ??? ?? ??? TypeScript ??? ??????. 6. ??? ????? ?? ??? ??? ?? ?? ??? ???? ?? VUE 3 ??? ? CSS ?? ??? ???? ???? ??? ?????.

?? ?????? VUE ????? ???? ?? ?? ????? ?? ??? ????? ???? ?????. ?? ???, ?? ?? ?? ?? UI ?? ?? ?????? ?????? ????? ????? ? ?? ?? ??? ????. VUE ?????? ???? ???? ??? ??? ???? (VITE ?? VUE CLI? ?? VUE 3? ??).

1. ??? ???? ?? ?????? ??????

???? ?? ?????? NPM ?? ??? ?? ?????. ???? ??? ???? ???? ??????.

 NPM ????? ??? ?????

??

 ?? ????? ??? ?????

?? ??, Lodash (???? ?????)? ????? :

 NPM ?? lodash

?? ?? ??? ? ?? UI ?????? ?? :

 NPM Element-Plus ??

? : VUE 3 ???? ??? ?? ??? ?? ???? ?? ??? ?? ??????.

2. ?? ??? ?? ?? ? ?? (?? ??)

??? ?? ?? ????? ?? ?? ???? ?? ?????? ?? ????.

? : ?? ??? Lodash ??

 <emplate>
  <div> {{formattedList}} </div>
</???>

<cript>
&#39;lodash&#39;?? _ ?? ??;

???? ??? {
  ??? () {
    ?? {
      ?? : [ &#39;Apple&#39;, &#39;Banana&#39;, &#39;Cherry&#39;]
    };
  },
  ?? : {
    formattedList () {
      let
    }
  }
};
</????>

? ???? ?? ??? ??? ? ??? ? ??????.

3. ??? ?? (???? ? UI ????? ?)

?? ????? ( Element Plus , Vuetify ?? Vue ??? ? ??)? ? ????? ????? ????? ?? ??, ?? ?? ????? ? ???? ??? ? ????.

? : ?? ??? ??

 NPM Element-Plus ??

?? ?? main.js ?? main.ts :

 'vue'?? {createapp} ?? ??;
'./app.vue'?? ? ?? ??;
'?? ???'?? ?? ??? ?? ??;
import 'element-plus/dist/index.css';

const app = createapp (app);

app.use (ElementPlus);
app.mount ( '#app');

?? ?? ?? ??? ?? ?? ( <el-button> , <el-input> ? ??)? ?? ???? ???? ??? ? ????.

?? ?? : ?? ??????? ?? ?? (? : ???, ??)? ??? ? ????.

4. ?? ?? (?? ??, ?? ??)

?? ?? UI ??????? ?? ??? ???? Unplugin-Auto-Import ? Unplugin-Vue ??? (Vite ????? ??)? ?? ??? ???? ?? ??? ??? ? ????.

???? ?? :

 NPM ?? -D UNPLUGIN-AUTO-IMPORT UNPLUGIN-VUE Components

vite.config.js ?? :

 'vite'?? {defuleconfig} ?? ??;
'@vitejs/plugin-vue'?? vue ?? ??;
'Unplugin-Auto-Import/Vite'?? ?? import ?? ??;
'unplugin-vue-components/vite'?? ?? ??? ?????.
'unplugin-vue-components/resolvers'?? {ElementPlusresolver} ?? ??;

???? DefuleConfig ({
  ???? : [
    vue (),
    ?? ?? ({
      Resolvers : [ElementPlusResolver ()],
    }),
    ?? ?? ({
      Resolvers : [ElementPlusResolver ()],
    }),
  ],,
});

?? <ElButton> ? ?? ?? ??? ????? ??? ? ???? ?????. ???? ?? ? ??? ????.

5. TypeScript ?? (???? ??)

????? TypeScript? ???? ?? ?????? ?? ??? ???????.

• ?? ??? ??? ?????? (? : index.d.ts )
• ?? ??? ?? ??????.

   npm install @type/library-name --save-dev

??? ?? tsconfig.json ?????? Volar (vue 's vs Code Extension)? ??? ?? ??? ????? ??????.

6. ?? ?? ? ??? ?? (?? ?)

?? ? (? : ??, PDF ???)??? ???? ??? ?????? ?? ?????????.

 const Chart = import ( 'Chart.js');

?? ?? ?? ?? (VUE ??? ??) :

 {
  ?? : '/report',
  ?? ?? : () => import ( './ views/reportview.vue') // Lazy-loads deps? ???
}

??? ?? ?? ??? ?? ?????.

??? ? ???? ??

• VUE 3 ????? VUE 2 ?? ????? ?? (??? ??)
• CSS import 'tailwindcss/tailwind.css' ?? ?? ???
• ? ??? ?? : ?? ??? ?? ? ????? ??? ??? ??
• bundle ?? ?? ?? ???? ?? (????? Bundlephobia? ??)

????? ?? ?? ??? ????? ??? ??? ????.
????? ?? ?? ??, Global .use() ???? ??? ???? ?? UI ??? ?? ?? ??? ??????.
???? ??? ???? ? ?? ?? ? ????. ??? ??????? ??????.

? ??? ?? ?????? VUE ????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!