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:
Buat direktori projek baharu dan mulakan projek npm baharu:
mkdir my-shadcn-app cd my-shadcn-app npm init -y
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
Pasang Tailwind CSS dan kebergantungan rakan sebayanya:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init
Ini mencipta fail tailwind.config.js.
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, }, };
Buat fail .babelrc untuk konfigurasi Babel:
touch .babelrc
Di dalam .babelrc, tambahkan yang berikut:
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
Kemas kini fail tailwind.config.js anda untuk memasukkan laluan ke komponen anda:
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], theme: { extend: {}, }, plugins: [], };
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
<!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>
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react'; const App = () => { return ( <div className="p-6"> <h1 className="text-3xl font-bold">Hello Shadcn!</h1> </div> ); }; export default App;
@tailwind base; @tailwind components; @tailwind utilities;
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.
Kemas kini package.json anda untuk menambah skrip permulaan untuk menjalankan pelayan pembangunan Webpack:
"scripts": { "start": "webpack serve --open" }
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!