Rumah > Artikel > hujung hadapan web > Bagaimana untuk memulakan projek Shadcn dari awal

Bagaimana untuk memulakan projek Shadcn dari awal

Susan Sarandonasal: 2024-09-23 08:30:03628semak imbas

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

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

Langkah 3: Pasang CSS Tailwind

Pasang Tailwind CSS dan kebergantungan rakan sebayanya:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Ini mencipta fail tailwind.config.js.

Langkah 4: Konfigurasikan Webpack

Buat fail webpack.config.js untuk mengkonfigurasi Webpack:

touch webpack.config.js

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,
  },
};

Langkah 5: Konfigurasikan Babel

Buat fail .babelrc untuk konfigurasi Babel:

touch .babelrc

Di dalam .babelrc, tambahkan yang berikut:

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

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: [],
};

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

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>

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'));

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;

src/index.css:

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

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

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"
}

Langkah 10: Mulakan Pelayan Pembangunan

Jalankan pelayan pembangunan dengan:

npm start

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!

json css html npm webpack for include Directory continue using public JS this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Memahami Prototaip dalam JavaScript: Tulang Belakang PewarisanArtikel seterusnya：Memahami Prototaip dalam JavaScript: Tulang Belakang Pewarisan

Artikel berkaitan

Lihat lagi