前端迅速上手

# 配置镜像源
npm config set registry https://registry.npmmirror.com
# 加速二进制文件下载
npm i --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/dist

# 这个节省磁盘,速度快。更新也是一样的命令，降级用pnpm@1.1.1这样
npm i -g pnpm
# 安装ts
npm i -g typescript
# web框架
npm i -g @nestjs/cli

# 查看全局安装的包
npm list -g

# pnpm开始代替npm
pnpm add xxx
pnpm update
pnpm list
pnpm remove
npx => pnpm dlx

# 创建项目,默认叫vue-project
pnpm create vue@latest [vue-project]
# 启用ts,vue-router,pinia,eslint,prettier,extension for debug
# 禁用jsx,vitest,end to end test

# 进入文件夹
cd vue-project
# 安装依赖
pnpm i
# 启动
pnpm run dev

# 构建html,输出内容在dist内
pnpm run build

# 查看是否有过期的包
pnpm outdated
# 更新包,加上--dev可以更新开发依赖  (只更新小版本)
pnpm update

# 全更新到latest
pnpm up --latest

# 先创建vue项目
# 安装依赖
pnpm add primevue @primeuix/themes


# 自动导入
pnpm add @primevue/auto-import-resolver unplugin-vue-components -D
# vim vite.config.js
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'
export default defineConfig({
  plugins: [
    Components({
      resolvers: [PrimeVueResolver()]
    })
  ]
})


# main.ts引入使用
import app from './app'
app.mount('#app')


# app.ts
# 修改主题颜色
import Aura from '@primeuix/themes/aura'
import { definePreset } from '@primeuix/themes'
const MyPreset = definePreset(Aura, {
  semantic: {
    primary: {
      50: '{indigo.50}',
      100: '{indigo.100}',
      200: '{indigo.200}',
      300: '{indigo.300}',
      400: '{indigo.400}',
      500: '{indigo.500}',
      600: '{indigo.600}',
      700: '{indigo.700}',
      800: '{indigo.800}',
      900: '{indigo.900}',
      950: '{indigo.950}'
    }
  }
})
# 引入使用
import PrimeVue from 'primevue/config'
app.use(PrimeVue, {
  theme: {
    preset: MyPreset,
    options: {
      prefix: 'p',
      darkModeSelector: '.p-dark',
      // cssLayer: {
      //  name: 'primevue',
      //  order: 'tailwind-base, primevue, tailwind-utilities'
      // }
    }
  }
})

# tailwindcss官网
https://tailwindcss.com/docs/installation/using-vite

# 示例
<h1 class="text-3xl font-bold underline"> Hello world! </h1>
<InputText placeholder="Overriden" class="p-8" />
<Button label="切换主题" @click="theme"></Button>

import Button from 'primevue/button';
import InputText from 'primevue/inputtext';
const theme = () => {
  document.documentElement.classList.toggle('p-dark')
}

# unstyled
pnpm add primevue

import PrimeVue from 'primevue/config'
import Aura from '@/presets/lara'
app.use(PrimeVue, {
  unstyled: true,
  pt: Aura
})

pnpm add tailwindcss-primeui
vim tailwind.config.js

import tpp from 'tailwindcss-primeui'
module.exports = {
    ...
    content: [
        "./presets/**/*.{js,vue,ts}",
    ],
    plugins: [tpp]
}

--surface-ground: var(--p-surface-100);
--maskbg: var(--p-mask-background);
--primary-color: var(--p-primary-color);
--primary-contrast-color: var(--p-primary-contrast-color);
--text-color: var(--p-text-color);
--text-color-secondary: var(--p-text-muted-color);
--surface-border: var(--p-content-border-color);
--surface-card: var(--p-content-background);
--surface-hover: var(--p-content-hover-background);
--surface-overlay: var(--p-overlay-popover-background);
--transition-duration: var(--p-transition-duration);
--content-border-radius: var(--p-content-border-radius);
--layout-section-transition-duration: .2s;
--element-transition-duration: var(--p-transition-duration);
--focus-ring-width: var(--p-focus-ring-width);
--focus-ring-style: var(--p-focus-ring-style);
--focus-ring-color: var(--p-focus-ring-color);
--focus-ring-offset: var(--p-focus-ring-offset);
--focus-ring-shadow: var(--p-focus-ring-shadow);
--code-background: var(--p-surface-900);
--code-color: var(--p-surface-200);

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "preLaunchTask": "tsc-build",
      "program": "dist/main.js"
    }

    // 终端运行 tsc --watch , 就不需要preLaunchTask了
    // {
    //   "type": "node",
    //   "request": "launch",
    //   "name": "启动程序",
    //   "program": "dist/main.js"
    // }
  ]
}

# compiled output
dist
node_modules

# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# OS
.DS_Store

# Tests
/coverage
/.nyc_output

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json