使用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 配置：
在 .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 元件：
按照螢幕上的指示安裝組件並為您的專案產生 Shadcn 庫。
第 9 步：更新 npm 腳本
更新 package.json 以新增啟動腳本來執行 Webpack 開發伺服器：
"scripts": {
"start": "webpack serve --open"
}
登入後複製
第10步：啟動開發伺服器
使用以下命令執行開發伺服器：
這應該在瀏覽器中打開您的應用程序，您將看到“Hello Shadcn！”使用 Tailwind CSS 進行樣式設定。現在您可以繼續將 Shadcn 元件新增到您的 React 專案中。
（人工智慧輔助生成）
以上是如何從頭開始啟動 Shadcn 項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！
