使用 react、tailwind css 和 shadcn 从头开始设置项目，但不使用任何预构建的样板，例如 create-next- app 或 create-react-app，您可以使用 webpack 或其他类似的捆绑器手动配置设置。以下是使用 webpack 进行设置的指南：
第 1 步：初始化 npm 项目
创建一个新的项目目录并初始化一个新的npm项目：
mkdir my-shadcn-appcd my-shadcn-appnpm init -y
第2步：安装react和依赖项
安装 react、reactdom、webpack 和 webpack-dev-server:
npm install react react-domnpm 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 autoprefixernpx 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 publictouch src/index.jsx src/app.jsx src/index.css public/index.html
公共/index.html：
my shadcn app
src/index.jsx：
import react from 'react';import reactdom from 'react-dom';import app from './app';import './index.css';reactdom.render(, document.getelementbyid('root'));
src/app.jsx：
import react from 'react';const app = () => { return ( hello shadcn!
);};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 项目的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491689.html
微信扫一扫 
支付宝扫一扫 
