Bagaimana untuk memulakan projek Shadcn dari awal-tutorial js-php.cn

Bagaimana untuk memulakan projek Shadcn dari awal

Susan Sarandon

Lepaskan： 2024-09-23 08:30:03

asal

648 orang telah melayarinya

How to start a Shadcn project from scratch

Untuk menyediakan projek dari awal menggunakan React, Tailwind CSS dan Shadcn, tetapi tanpa menggunakan sebarang plat dandang pra-bina seperti create-next-app atau create-react-app, anda boleh mengkonfigurasi persediaan secara manual menggunakan Webpack atau bundler serupa yang lain. Di bawah ialah panduan untuk menyediakannya dengan Webpack:

Langkah 1: Mulakan Projek npm

Buat direktori projek baharu dan mulakan projek npm baharu:

mkdir my-shadcn-app
cd my-shadcn-app
npm init -y

Salin selepas log masuk

Langkah 2: Pasang React dan Dependencies

Pasang React, ReactDOM, webpack dan webpack-dev-server:

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

Salin selepas log masuk

Langkah 3: Pasang CSS Tailwind

Pasang Tailwind CSS dan kebergantungan rakan sebayanya:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Salin selepas log masuk

Ini mencipta fail tailwind.config.js.

Langkah 4: Konfigurasikan Webpack

Buat fail webpack.config.js untuk mengkonfigurasi Webpack:

touch webpack.config.js

Salin selepas log masuk

Di dalam webpack.config.js, tambahkan yang berikut:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
};

Salin selepas log masuk

Langkah 5: Konfigurasikan Babel

Buat fail .babelrc untuk konfigurasi Babel:

touch .babelrc

Salin selepas log masuk

Di dalam .babelrc, tambahkan yang berikut:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Salin selepas log masuk

Langkah 6: Konfigurasikan CSS Tailwind

Kemas kini fail tailwind.config.js anda untuk memasukkan laluan ke komponen anda:

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Salin selepas log masuk

Langkah 7: Sediakan Struktur Projek Anda

Buat folder dan fail yang diperlukan untuk aplikasi React anda:

mkdir src public
touch src/index.jsx src/App.jsx src/index.css public/index.html

Salin selepas log masuk

public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Shadcn App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Salin selepas log masuk

src/index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));

Salin selepas log masuk

src/App.jsx:

import React from 'react';

const App = () => {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold">Hello Shadcn!</h1>
    </div>
  );
};

export default App;

Salin selepas log masuk

src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Salin selepas log masuk

Langkah 8: Pasang Komponen Shadcn

Sekarang anda mempunyai persediaan asas, pasang pakej Shadcn dan komponennya. Pasang komponen Shadcn CLI dan Tailwind untuk projek React anda:

npx shadcn-init

Salin selepas log masuk

Ikuti arahan pada skrin untuk memasang komponen dan menjana pustaka Shadcn untuk projek anda.

Langkah 9: Kemas kini Skrip npm

Kemas kini package.json anda untuk menambah skrip permulaan untuk menjalankan pelayan pembangunan Webpack:

"scripts": {
  "start": "webpack serve --open"
}

Salin selepas log masuk

Langkah 10: Mulakan Pelayan Pembangunan

Jalankan pelayan pembangunan dengan:

npm start

Salin selepas log masuk

Ini sepatutnya membuka apl anda dalam penyemak imbas dan anda akan melihat "Hello Shadcn!" digayakan dengan Tailwind CSS. Anda kini boleh terus menambah komponen Shadcn pada projek React anda.

(Dihasilkan dengan bantuan AI)

Atas ialah kandungan terperinci Bagaimana untuk memulakan projek Shadcn dari awal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!