Comment démarrer un projet Shadcn à partir de zéro-js tutoriel-php.cn

Comment démarrer un projet Shadcn à partir de zéro

Susan Sarandon

Libérer： 2024-09-23 08:30:03

original

662 Les gens l'ont consulté

How to start a Shadcn project from scratch

Pour configurer un projet à partir de zéro en utilisant React, Tailwind CSS et Shadcn, mais sans utiliser aucun des passe-partout prédéfinis comme create-next-app ou create-react-app, vous pouvez configurer manuellement la configuration à l'aide de Webpack ou d'autres bundles similaires. Vous trouverez ci-dessous un guide pour configurer cela avec Webpack :

Étape 1 : initialiser un projet npm

Créez un nouveau répertoire de projet et initialisez un nouveau projet npm :

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

Copier après la connexion

Étape 2 : Installer React et les dépendances

Installez React, ReactDOM, webpack et 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

Copier après la connexion

Étape 3 : Installez Tailwind CSS

Installez Tailwind CSS et ses dépendances homologues :

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Copier après la connexion

Cela crée le fichier tailwind.config.js.

Étape 4 : Configurer Webpack

Créez un fichier webpack.config.js pour configurer Webpack :

touch webpack.config.js

Copier après la connexion

Dans webpack.config.js, ajoutez ce qui suit :

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

Copier après la connexion

Étape 5 : Configurer Babel

Créez un fichier .babelrc pour la configuration de Babel :

touch .babelrc

Copier après la connexion

Dans .babelrc, ajoutez ce qui suit :

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

Copier après la connexion

Étape 6 : Configurer Tailwind CSS

Mettez à jour votre fichier tailwind.config.js pour inclure les chemins d'accès à vos composants :

tailwind.config.js :

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

Copier après la connexion

Étape 7 : Configurez la structure de votre projet

Créez les dossiers et fichiers nécessaires pour votre application React :

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

src/index.css :

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

Copier après la connexion

Étape 8 : Installer les composants Shadcn

Maintenant que vous disposez de la configuration de base, installez le package Shadcn et ses composants. Installez les composants Shadcn CLI et Tailwind pour votre projet React :

npx shadcn-init

Copier après la connexion

Suivez les instructions à l'écran pour installer les composants et générer la bibliothèque Shadcn pour votre projet.

Étape 9 : Mettre à jour les scripts npm

Mettez à jour votre package.json pour ajouter un script de démarrage pour exécuter le serveur de développement Webpack :

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

Copier après la connexion

Étape 10 : démarrer le serveur de développement

Exécutez le serveur de développement avec :

npm start

Copier après la connexion

Cela devrait ouvrir votre application dans le navigateur et vous verrez « Bonjour Shadcn ! » stylisé avec Tailwind CSS. Vous pouvez maintenant continuer à ajouter des composants Shadcn à votre projet React.

(Généré avec l'assistance de l'IA)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!