首頁 > 文章 > web前端 > 如何從頭開始啟動 Shadcn 項目

如何從頭開始啟動 Shadcn 項目

Susan Sarandon原創: 2024-09-23 08:30:03511瀏覽

How to start a Shadcn project from scratch

使用React、Tailwind CSS 和Shadcn 從頭開始使用任何設定項目，但不使用任何預構建的樣板文件，如create-next-app 或create-react-app，您可以使用Webpack 或其他類似的捆綁器手動配置設定。以下是使用 Webpack 進行設定的指南：

第 1 步：初始化 npm 項目

建立一個新的專案目錄並初始化一個新的npm專案：

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

步驟2：安裝React和依賴項

安裝 React、ReactDOM、webpack 和 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

第 3 步：安裝 Tailwind CSS

安裝 Tailwind CSS 及其對等依賴項：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

這將建立 tailwind.config.js 檔案。

第 4 步：設定 Webpack

建立用於設定 Webpack 的 webpack.config.js 檔案：

touch webpack.config.js

在 webpack.config.js 中，加入以下內容：

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

第 5 步：設定 Babel

建立 .babelrc 檔案用於 Babel 配置：

touch .babelrc

在 .babelrc 中，加入以下內容：

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

第 6 步：設定 Tailwind CSS

更新 tailwind.config.js 檔案以包含元件的路徑：

tailwind.config.js：

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

第 7 步：設定項目結構

為您的 React 應用程式建立必要的資料夾和檔案：

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

公共/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;

第8步：安裝Shadcn組件

現在您已經完成了基本設置，請安裝 Shadcn 軟體包及其組件。為您的 React 專案安裝 Shadcn CLI 和 Tailwind 元件：

npx shadcn-init

按照螢幕上的指示安裝組件並為您的專案產生 Shadcn 庫。

第 9 步：更新 npm 腳本

更新 package.json 以新增啟動腳本來執行 Webpack 開發伺服器：

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

第10步：啟動開發伺服器

使用以下命令執行開發伺服器：

npm start

這應該在瀏覽器中打開您的應用程序，您將看到“Hello Shadcn！”使用 Tailwind CSS 進行樣式設定。現在您可以繼續將 Shadcn 元件新增到您的 React 專案中。

（人工智慧輔助生成）

以上是如何從頭開始啟動 Shadcn 項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：理解 JavaScript 中的原型：繼承的支柱下一篇：理解 JavaScript 中的原型：繼承的支柱

看更多