{"id":10006143,"date":"2022-08-09T13:08:42","date_gmt":"2022-08-09T05:08:42","guid":{"rendered":"https:\/\/ityet.com\/?p=10006143"},"modified":"2022-08-09T13:08:42","modified_gmt":"2022-08-09T05:08:42","slug":"%e4%bd%bf%e7%94%a8vue-js%e7%bc%96%e5%86%99%e5%91%bd%e4%bb%a4%e8%a1%8c%e7%95%8c%e9%9d%a2%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91cli%e7%9a%84%e5%88%a9%e5%99%a8","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10006143","title":{"rendered":"\u4f7f\u7528Vue.js\u7f16\u5199\u547d\u4ee4\u884c\u754c\u9762,\u524d\u7aef\u5f00\u53d1CLI\u7684\u5229\u5668"},"content":{"rendered":"

\u524d\u8a00<\/h2>\n

\u5927\u5bb6\u597d,\u6211\u662fwebfansplz<\/a>.\u7ee7\u5c06 Vue \u6e32\u67d3\u5230\u5d4c\u5165\u5f0f\u6db2\u6676\u5c4f<\/a>\u540e,\u4eca\u5929\u8981\u8ddf\u5927\u5bb6\u5206\u4eab\u7684\u662f\u5982\u4f55\u5c06Vue\u6e32\u67d3\u5230\u547d\u4ee4\u884c\u5de5\u5177 :).\u5173\u4e8e\u547d\u4ee4\u884c\u5de5\u5177,\u5927\u5bb6\u5e94\u8be5\u90fd\u6bd4\u8f83\u719f\u6089\u4e86,\u6bd4\u5982vue-cli\u3001Vite\u7b49.\u6211\u4eec\u5728\u7f16\u5199\u524d\u7aef\u5e94\u7528\u9762\u5411\u7528\u6237\u65f6,\u901a\u5e38\u4f1a\u975e\u5e38\u5173\u6ce8\u7528\u6237\u4f53\u9a8c,\u4f5c\u4e3a\u5f00\u53d1\u8005,\u6211\u4eec\u5728\u4f7f\u7528\u5de5\u5177\u65f6,\u5b83\u7ed9\u4e88\u6211\u4eec\u7684\u5f00\u53d1\u8005\u4f53\u9a8c(DX)\u6211\u4eec\u4e5f\u4f1a\u5341\u5206\u5173\u6ce8. \u73b0\u4ee3\u524d\u7aef\u5de5\u7a0b\u5316\u79bb\u4e0d\u5f00CLI\u7684\u5f00\u53d1\u4e0e\u4f7f\u7528\u3001\u90a3\u4e48\u662f\u5426\u80fd\u6709\u8f83\u4f4e\u6210\u672c\u7684\u65b9\u6848\u80fd\u8ba9\u524d\u7aef\u5c0f\u4f19\u4f34\u5feb\u901f\u5f00\u53d1CLI,\u5927\u5bb6\u53ef\u4ee5\u50cf\u7f16\u5199\u524d\u7aef\u5e94\u7528\u4e00\u6837\u641e\u5b9a\u5b83.\u56e0\u6b64,Temir<\/a>\u5e94\u8fd0\u800c\u751f.<\/p>\n

Temir<\/h2>\n

\u4ecb\u7ecd<\/h3>\n

Temir<\/a>,\u4e00\u4e2a\u7528Vue\u7ec4\u4ef6\u6765\u7f16\u5199\u547d\u4ee4\u884c\u754c\u9762\u5e94\u7528\u7684\u5de5\u5177.\u5f00\u53d1\u8005\u53ea\u9700\u8981\u4f7f\u7528Vue\u5c31\u53ef\u4ee5\u7f16\u5199\u547d\u4ee4\u884c\u5e94\u7528,\u4e0d\u9700\u8981\u4efb\u4f55\u989d\u5916\u7684\u5b66\u4e60\u6210\u672c.<\/p>\n

\"\"<\/p>\n

<script lang="ts" setup>\nimport { ref } from '@vue\/runtime-core'\nimport { TBox, TText } from '@temir\/core'\nconst counter = ref(0)\nsetInterval(() => {\n  counter.value++\n}, 100)\n<\/script>\n\n<template>\n  <TBox>\n    <TText color="green">\n      {{ counter }} tests passed\n    <\/TText>\n  <\/TBox>\n<\/template><\/code><\/pre>\n
\u7ec4\u4ef6<\/h3>\n
Temir<\/a>\u63d0\u4f9b\u4e86\u4e00\u4e9b\u57fa\u7840\u7ec4\u4ef6\u5e2e\u52a9\u5f00\u53d1\u8005\u7f16\u5199\u4e0e\u6269\u5c55\u547d\u4ee4\u884c\u5de5\u5177:<\/p>\n
\u6587\u672c\u7ec4\u4ef6 (Text)<\/h4>\n
\u6587\u672c\u7ec4\u4ef6\u53ef\u4ee5\u663e\u793a\u6587\u672c,\u5c06\u5176\u6837\u5f0f\u66f4\u6539\u4e3a\u7c97\u4f53\u3001\u4e0b\u5212\u7ebf\u3001\u659c\u4f53\u6216\u5220\u9664\u7ebf.<\/p>\n
\"\"<\/p>\n
<TText color="green">\n  I am green\n<\/TText>\n\n<TText color="black" background-color="white">\n  I am black on white\n<\/TText>\n\n<TText color="white">\n  I am white\n<\/TText>\n\n<TText :bold="true">\n  I am bold\n<\/TText>\n\n<TText :italic="true">\n  I am italic\n<\/TText>\n\n<TText :underline="true">\n  I am underline\n<\/TText>\n\n<TText :strikethrough="true">\n  I am strikethrough\n<\/TText>\n\n<TText :inverse="true">\n  I am inversed\n<\/TText><\/code><\/pre>\n
\u76d2\u5b50\u7ec4\u4ef6 (Box)<\/h4>\n
<Box><\/code>\u662f\u6784\u5efa\u5e03\u5c40\u5fc5\u4e0d\u53ef\u5c11\u7684Temir\u7ec4\u4ef6.\u5c31\u50cf\u5728\u6d4f\u89c8\u5668\u4e2d<div style='display: flex'>.<\/code>\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e9b\u6784\u5efa\u5e03\u5c40\u7684\u5e38\u7528\u5c5e\u6027,\u6bd4\u5982\u5c3a\u5bf8\u3001\u5185\u5916\u8fb9\u8ddd\u3001\u5bf9\u9f50\u65b9\u5f0f\u7b49.<\/p>\n
<template>\n  <TBox justify-content="flex-start">\n    <TText>X<\/TText>\n  <\/TBox>\n  \/\/ [X      ]\n\n  <TBox justify-content="center">\n    <TText>X<\/TText>\n  <\/TBox>\n  \/\/ [   X   ]\n\n  <TBox justify-content="flex-end">\n    <TText>X<\/TText>\n  <\/TBox>\n  \/\/ [      X]\n\n  <TBox justify-content="space-between">\n    <TText>X<\/TText>\n    <TText>Y<\/TText>\n  <\/TBox>\n  \/\/ [X      Y]\n\n  <TBox justify-content="space-around">\n    <TText>X<\/TText>\n    <TText>Y<\/TText>\n  <\/TBox>\n  \/\/ [  X   Y  ]\n<\/template><\/code><\/pre>\n
\u6362\u884c\u7ec4\u4ef6 (Newline)<\/h4>\n
\u6dfb\u52a0\u4e00\u4e2a\u6216\u591a\u4e2a\u6362\u884c\u7b26(\/n)\u3002 \u5fc5\u987b\u5728<Text><\/code>\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u3002<\/p>\n
<script>\nimport { TBox, TNewline, TText } from '@temir\/core'\n<\/script>\n\n<template>\n  <TBox>\n    <TText>\n      <TText color="green">\n        Hello\n      <\/TText>\n      <TNewline \/>\n      <TText color="red">\n        World\n      <\/TText>\n    <\/TText>\n  <\/TBox>\n<\/template><\/code><\/pre>\n
\u586b\u5145\u7ec4\u4ef6 (Spacer)<\/h4>\n
\u6cbf\u5176\u5305\u542b\u5e03\u5c40\u7684\u4e3b\u8f74\u5c55\u5f00\u7684\u7075\u6d3b\u7a7a\u95f4\u3002 \u4f5c\u4e3a\u586b\u5145\u5143\u7d20\u4e4b\u95f4\u6240\u6709\u53ef\u7528\u7a7a\u95f4\u7684\u5feb\u6377\u65b9\u5f0f\uff0c\u5b83\u975e\u5e38\u6709\u7528\u3002<\/p>\n
\u4f8b\u5982\uff0c\u5728\u5177\u6709\u9ed8\u8ba4\u4f38\u7f29\u65b9\u5411(row<\/code>)\u7684<Box><\/code>\u4e2d\u4f7f\u7528<Spacer><\/code>\u5c06\u628a”Left”\u5b9a\u4f4d\u5230\u5de6\u8fb9\uff0c\u5e76\u5c06”Right”\u63a8\u5230\u53f3\u8fb9\u3002<\/p>\n
<script lang="ts" setup>\nimport { TBox, TSpacer, TText } from '@temir\/core'\n<\/script>\n\n<template>\n  <TBox>\n    <TText>Left<\/TText>\n    <TSpacer \/>\n    <TText>Right<\/TText>\n  <\/TBox>\n<\/template>\n<\/code><\/pre>\n
\u8d85\u94fe\u63a5\u7ec4\u4ef6 (Link)<\/h4>\n
\"\"<\/p>\n
<script lang="ts" setup>\nimport { TBox, TText } from '@temir\/core'\nimport TLink from '@temir\/link'\n<\/script>\n\n<template>\n  <TBox\n    :margin="5"\n    width="20"\n    border-style="round"\n    justify-content="center"\n  >\n    <TLink url="https:\/\/github.com">\n      <TText color="yellow">\n        Hi\n      <\/TText>\n      <TText color="cyan">\n        Github\n      <\/TText>\n    <\/TLink>\n  <\/TBox>\n<\/template><\/code><\/pre>\n
\u52a0\u8f7d\u4e2d\u7ec4\u4ef6 (Spinner)<\/h4>\n
\"\"<\/p>\n
<script lang="ts" setup>\nimport { TBox, TText } from '@temir\/core'\nimport TSpinner from '@temir\/spinner'\n<\/script>\n\n<template>\n  <TBox\n    :margin="5"\n    width="20"\n    border-style="round"\n    justify-content="center"\n  >\n    <TText>\n      <TText color="yellow">\n        <TSpinner \/>\n      <\/TText>\n      Loading\n    <\/TText>\n  <\/TBox>\n<\/template><\/code><\/pre>\n
\u6807\u7b7e\u9875\u7ec4\u4ef6 (Tab)<\/h4>\n
\"\"<\/p>\n
<script lang="ts" setup>\nimport { computed, ref } from '@vue\/runtime-core'\nimport { TBox, TText } from '@temir\/core'\nimport { TTab, TTabs } from '@temir\/tab'\n\nconst tabs = ['Vue', 'React', 'Angular', 'Solid', 'Svelte']\nconst activeIndex = ref(0)\nconst selectedText = computed(() => tabs[activeIndex.value])\n<\/script>\n\n<template>\n  <TBox>\n    <TText>\n      Selected Text :\n      <TText color="red">\n        {{ selectedText }}\n      <\/TText>\n    <\/TText>\n  <\/TBox>\n\n  <TBox>\n    <TTabs :on-change="(index) => activeIndex = +index">\n      <TTab v-for="item in tabs" :key="item">\n        {{ item }}\n      <\/TTab>\n    <\/TTabs>\n  <\/TBox>\n<\/template><\/code><\/pre>\n
\u9009\u62e9\u7ec4\u4ef6<\/h4>\n
\"\"<\/p>\n
<script lang="ts" setup>\nimport TSelectInput from '@temir\/select-input'\n\nconst items = [\n  {\n    label: 'Vue',\n    value: 'Vue',\n  },\n  {\n    label: 'Vite',\n    value: 'Vite',\n  },\n  {\n    label: 'Temir',\n    value: 'Temir',\n  },\n]\nfunction onSelect(value) {\n  console.log('selected', value)\n}\n<\/script>\n\n<template>\n  <TSelectInput :items="items" :on-select="onSelect" \/>\n<\/template>\n<\/code><\/pre>\n
\u5b89\u88c5<\/h3>\n
npm install @temir\/core<\/code><\/pre>\n
\u4f7f\u7528<\/h3>\n
<script lang="ts" setup>\nimport { ref } from '@vue\/runtime-core'\nimport { TBox, TText } from '@temir\/core'\nconst counter = ref(0)\nsetInterval(() => {\n  counter.value++\n}, 100)\n<\/script>\n\n<template>\n  <TBox>\n    <TText color="green">\n      {{ counter }} tests passed\n    <\/TText>\n  <\/TBox>\n<\/template><\/code><\/pre>\n
\"\"<\/p>\n
HMR\u652f\u6301<\/h3>\n
\u524d\u9762\u6211\u4eec\u63d0\u5230\u4e86\u5f00\u53d1\u8005\u4f53\u9a8c(DX),\u5728\u73b0\u5728\u7684\u524d\u7aef\u5de5\u7a0b\u4e2d,\u5bf9\u5f00\u53d1\u8005\u5f88\u6709\u5e2e\u52a9\u4e14\u63d0\u6548\u7684\u5c31\u662fHMR,\u8fd9\u4e48\u9999\u7684\u4e1c\u897fTemir<\/a>\u6ca1\u6709\u7406\u7531\u4e0d\u62e5\u6709\u5b83,\u8bdd\u4e0d\u591a\u8bf4,\u76f4\u63a5\u5c55\u793a:<\/p>\n
\"\"<\/p>\n
\u5f00\u7bb1\u5373\u7528<\/h3>\n
\u4f7f\u7528Temir<\/a>\u5b9a\u5236\u5316CLI\u975e\u5e38\u7b80\u5355,\u6211\u4eec\u63d0\u4f9b\u4e86@temir\/cli<\/a>\u5e2e\u52a9\u4f60\u5feb\u901f\u6784\u5efa\u4e00\u4e2a\u57fa\u4e8eTemir<\/a>\u7684CLI.<\/p>\n
mkdir my-temir-cli\n\ncd my-temir-cli\n\ntouch main.ts\n\nnpm install @temir\/cl\n\n# Dev (\u5f00\u53d1)\n\ntemir main.ts\n\n# Build (\u6253\u5305)\n\ntemir build main.ts<\/code><\/pre>\n
\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e0b\u8f7d\u8fd9\u4e2a \u4f8b\u5b50<\/a> \u6765\u5feb\u901f\u5f00\u59cb\uff0c\u4f60\u4e5f\u53ef\u4ee5\u6253\u5f00 repl.it sandbox<\/a>\u6765\u5728\u7ebf\u4f53\u9a8c\u548c\u5c1d\u8bd5\u5b83\u3002<\/p>\n
\u6f14\u793a<\/h2>\n
Hi Temir<\/a><\/h3>\n
\"\"<\/p>\n
Borders<\/a><\/h3>\n
Table<\/a><\/h3>\n
\"\"<\/p>\n
Vitest<\/a><\/h3>\n
\"\"<\/p>\n
\u5b9e\u73b0<\/h2>\n