前端迅速上手

# 配置镜像源
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

# 先创建vue项目
# 安装依赖
pnpm add primevue @primevue/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 { createApp } from 'vue';
const app = createApp(App);
# 修改主题颜色
import Aura from '@primevue/themes/aura'
import { definePreset } from '@primevue/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
# 安装依赖
pnpm add -D tailwindcss postcss autoprefixer
# 创建文件 tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p
# 配置tailwind.config.js的content
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
}

# main.css内容
# 不同于tailwindcss,内容来自 https://primevue.org/tailwind/#override
/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@layer tailwind-base, primevue, tailwind-utilities;
@layer tailwind-base {
  @tailwind base;
}
@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

# 在main.ts里引用
import './assets/main.css'

# tailwind.config.js
pnpm add tailwindcss-primeui
import tpp from 'tailwindcss-primeui'

export default {
  plugins: [tpp]
}



# 示例
<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]
}

{
  "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"
    // }
  ]
}