前端（十九）——vue/react脚手架的搭建方式

😄博主：小猫娃来啦
😄文章核心：前端（十九）——vue/react脚手架的搭建方式

前言

脚手架是前端开发中常用的工具，它能够帮助开发者快速搭建项目结构、配置开发环境和提供一些常用的功能模块。Vue和React作为两个主流的前端框架，官方都提供了相应的脚手架工具来帮助开发者快速开始项目。本文将详细讲解Vue和React的脚手架搭建方法，并介绍Vite和其他方式搭建脚手架的探讨。

---

Vue脚手架搭建方法

Vue提供了两种常用的脚手架搭建方法：Vue CLI和Vite。

---

Vue CLI脚手架

Vue CLI是官方提供的一套全面的开发工具链，可以帮助开发者快速搭建Vue项目。以下是使用Vue CLI搭建Vue脚手架的步骤：

• 安装Vue CLI：通过npm或yarn全局安装Vue CLI。
• 创建Vue项目：使用命令行运行vue create project-name来创建一个新的Vue项目。
• 选择项目配置：可以选择默认配置或手动配置项目选项。
• 添加插件：可以根据项目需求选择添加一些插件。
• 运行项目：运行npm run serve命令来启动开发服务器。

Vite脚手架

Vite是一种新型的前端构建工具，由Vue官方推出，旨在提供快速的冷启动和热更新。以下是使用Vite搭建Vue脚手架的步骤：

• 创建项目：使用命令运行npm init vite project-name来创建一个新的Vite项目- 选择模板：可以选择不同的模板，如Vue、React等。
• 安装依赖：进入项目目录，并使用npm install或yarn install命令安装项目依赖。
• 运行项目：运行npm run dev命令来启动Vite开发服务器。

其他方式

除了Vue CLI和Vite，还有一些其他方式可以搭建Vue脚手架，如手动配置Webpack、Rollup等构建工具。这些方式可以提供更高度的自定义和配置灵活性，但也需要更多的设置和工作量。

---

React脚手架搭建方法

React同样提供了官方的脚手架搭建方法：Create React App和Vite。

Create React App脚手架

Create React App是官方提供的快速搭建React项目的工具，它自动配置了开发环境，让开发者可以专注于React业务逻辑的开发。以下是使用Create React App搭建React脚手架的步骤：

• 安装Create React App：通过npm或yarn全局安装Create React App。npm i -g create-react-app
• 创建React项目：使用命令行运行npx create-react-app project-name来创建一个新的React项目。
• 运行项目：运行npm start命令来启动开发服务器。

Vite脚手架

和Vue一样，React也可以使用Vite作为脚手架工具来快速构建项目。使用Vite搭建React脚手架的步骤与搭建Vue脚手架类似，可以参考前面的介绍。

其他方式

除了Create React App和Vite，也可以通过手动配置Webpack或其他构建工具来搭建React脚手架。

---

Vite的特点和使用

Vite是由Vue官方团队推出的一款基于ES Modules的新型前端构建工具。与传统的基于Webpack或Rollup的构建工具相比，Vite具有更快的冷启动时间和热更新速度。Vite通过利用浏览器原生的ES模块加载能力，将源代码直接提供给浏览器，而无需预打包。使用Vite搭建React或Vue项目，只需简单的配置文件，并且能够享受到快速的开发体验。

用vite搭建脚手架，给一个教程：

创建好空文件夹
cmd打开
yarn create vite
选择项目类型
安装依赖，一键运行

视频教程如下：

官方文档：vite构建脚手架官方文档

---

使用webpack搭建脚手架

除了官方提供的脚手架工具，开发者还可以通过其他方式来搭建项目的脚手架。例如，可以手动配置Webpack或Rollup来构建定制化的脚手架，也可以使用Yeoman等脚手架生成器工具来快速生成项目模板。

我着重介绍一下webpack如何搭建脚手架，使用Webpack构建Vue和React项目的步骤如下：

构建Vue项目

1. 创建一个新的项目文件夹，并使用npm或yarn初始化一个新的npm项目。

mkdir my-vue-project
cd my-vue-project
npm init -y
1
2
3

2. 安装Vue和相关依赖。

npm install vue vue-loader vue-template-compiler --save-dev
1

3. 安装Webpack及其相关依赖。

npm install webpack webpack-cli webpack-dev-server --save-dev
1

4. 创建Webpack配置文件webpack.config.js，并进行如下配置：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // 可以添加其他规则，如处理CSS、图片等
    ],
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在上述配置中，entry指定了入口文件的路径，output指定了输出文件的路径和名称。module.rules定义了Webpack处理不同类型文件的规则，这里使用了vue-loader来处理Vue文件和babel-loader来处理JavaScript文件。resolve用于配置模块解析的别名和扩展名。devServer用于配置开发服务器。

5. 创建项目结构：在项目根目录下创建src文件夹，并在其中创建main.js作为Vue应用程序的入口文件。

6. 创建Vue组件和相关文件，如.vue文件、.js文件和.css文件。

7. 在package.json中添加启动命令：

"scripts": {
  "start": "webpack-dev-server --open --config webpack.config.js"
}
1
2
3

8. 运行启动命令以启动开发服务器。

npm start
1

现在，你可以在浏览器中访问http://localhost:8080来查看你的Vue应用程序。

构建React项目

1. 创建一个新的项目文件夹，并使用npm或yarn初始化一个新的npm项目。

mkdir my-react-project
cd my-react-project
npm init -y
1
2
3

2. 安装React和相关依赖。

npm install react react-dom --save
1

3. 安装Webpack及其相关依赖。

npm install webpack webpack-cli webpack-dev-server --save-dev
1

4. 创建Webpack配置文件webpack.config.js，并进行如下配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // 可以添加其他规则，如处理CSS、图片等
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在上述配置中，entry指定了入口文件的路径，output指定了输出文件的路径和名称。module.rules定义了Webpack处理不同类型文件的规则，这里使用了babel-loader来处理JavaScript文件。resolve用于配置模块解析的扩展名。devServer用于配置开发服务器。

5. 创建项目结构：在项目根目录下创建src文件夹，并在其中创建index.js作为React应用程序的入口文件。

6. 创建React组件和相关文件，如.js文件和.css文件。

7. 安装Babel及其相关依赖，用于将JSX语法转换为普通的JavaScript语法。

npm install @babel/core @babel/preset-react babel-loader --save-dev
1

8. 在项目根目录下创建.babelrc文件，并进行如下配置：

{
  "presets": ["@babel/preset-react"]
}
1
2
3

9. 在Webpack配置文件中添加对.jsx文件的处理规则：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // ...
    ],
  },
  // ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

10. 在package.json中添加启动命令：

"scripts": {
  "start": "webpack-dev-server --open --config webpack.config.js"
}
1
2
3

11. 运行启动命令以启动开发服务器。

npm start
1

现在，你可以在浏览器中访问http://localhost:8080来查看你的React应用程序。

以上是使用Webpack构建Vue和React项目的基本步骤。你可以根据具体需求进行更复杂的配置和使用各种插件来优化你的应用程序构建过程。

---

总结

在开发Vue和React项目时，使用官方提供的脚手架工具能够帮助开发者快速搭建项目结构和配置开发环境。Vue CLI和Create React App是官方提供的两种常用脚手架工具，而Vite则是一款新型的前端构建工具，具有更快的启动和热更新速度。此外，还可以通过手动配置构建工具或使用其他方式搭建脚手架。选择合适的脚手架方式，能够提高开发效率，让开发者更专注于业务逻辑的开发。当然这个也是根据公司需求，如果要从0开始，那就搭建。当然也有开发好的框架模板，可以直接拿来使用。

---