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:03511semak imbas
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!