如何从头开始启动 Shadcn 项目

百变鹏仔 3天前 #JavaScript

文章标签项目

使用 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：

      <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>my shadcn app</title><div id="root"></div>

src/index.jsx：

import react from 'react';import reactdom from 'react-dom';import app from './app';import './index.css';reactdom.render(<app></app>, document.getelementbyid('root'));

src/app.jsx：

import react from 'react';const app = () =&gt; {  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 项目中。

（人工智能辅助生成）

文章推荐