快速创建demo，vue3.2+vite+ts+tsx项目（第一天）

!

初始化项目

本地新建空文件

• vite-vue3-ts npm create vite@latest vue3-vite-ts --template vue-ts
• cd vue3-vite-ts
• npm i
• code
• npm run dev

配置组件引用别名

npm i -D @types/node

引入css 插件

使用最近比较火的 unocss

• npm i -D unocss
• npm i -D less
• npm i -D less-loader

[unocss](unocss/unocss: The instant on-demand atomic CSS engine. (github.com))

配置

vite.config.ts

mian.ts

import 'uno.css'

 <button class="c-red b-2 font-50">ring-0</button>

<button class="c-blue b-10 bg-red">ring-2</button>

配置 代码片段

• 设置
• 配置 用户代码片段

{
  "Print to vueTemplate": {
    "prefix": "v",
    "body": [
      "<template>",
      "  <div>",
      "    $3",
      "  </div>",
      "</template>",
      "<script>",
      "export default {",
      "  name:'$1',",
      "  data(){",
      "    return {",
      "       $2",
      "    }",
      "  }",
      "}",
      "</script>",
      "<style scoped lang='scss'>",
      "</style>"
    ],
    "description": "vue2 模板"
  }
}

• prefix 快捷键名称
• body [ 配置代码片段]

引入 常用插件

- unplugin-vue-components 自动给按需导入组件
  `npm i unplugin-vue-components`
  
# vue-router -- vue路由 npm i vue-router 

# pinia -- vue 全局状态存储库 npm i pinia 

# unplugin-auto-import -- 自动导入 npm i unplugin-auto-import 

# element-plus 组件库 npm i element-plus

# dayjs 日期库 npm i dayjs

#  currency.js 金额库

#  vxe-table 组件库

自行按需 安装 吧
  

TSX 配置 使用

预热第二天来。。。。嘿嘿