vite的使用，开发vue项目时webpack的初始化和配置；babel/preset-env的作用

最新推荐文章于 2024-04-23 14:15:18 发布

m0_63835647

最新推荐文章于 2024-04-23 14:15:18 发布

阅读量1.3k

点赞数

文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/m0_63835647/article/details/131344578

版权

使用 Vite 构建前端项目中，通常需要进行以下步骤：

安装 Vite：在项目根目录执行 npm install vite -D 或 yarn add vite -D 安装 Vite。
初始化项目：在项目根目录执行 npm init -y 或 yarn init -y 初始化项目，生成 package.json。
创建项目文件：在项目根目录创建 src/index.html、src/index.js、src/App.vue（使用 Vue）等文件。
配置 package.json：在 package.json 文件中添加 "scripts": {"dev": "vite"} 用于启动 Vite。
运行项目：执行 npm run dev 或 yarn dev 命令启动 Vite。

运行成功后，Vite 将会自动打开浏览器，加载项目首页，并且在后台监听文件变化，实时更新页面。

下面是一个基于 Vue 的示例：

安装 Vue：在项目根目录执行 npm install vue 或 yarn add vue 安装 Vue。
修改 src/index.html 文件，添加一个 div 标签用于显示 Vue 组件：
```
<body>
  <div id="app"></div>
  <script src="./main.js"></script>
</body>
```

修改 src/main.js，编写 Vue 组件代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

修改 src/App.vue，编写 Vue 组件模板代码：

<template>
  <div>
    <h1>Hello, Vite and Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

运行项目：执行 npm run dev 或 yarn dev 命令启动 Vite。
在浏览器中打开 http://localhost:3000 即可看到页面效果。

使用 Vite 可以轻松地启动一个前端项目，并快速进行开发。同时，Vite 还支持很多高级特性，如热更新、按需加载、JS 和 CSS 的预编译等功能，可以通过文档进一步了解
---------------------------------------------------------------------------------------------------------------

开发 Vue 项目时，Webpack 是一个常用的构建工具。下面是使用 Webpack 构建 Vue 项目的初始化和配置步骤：

安装依赖：在项目根目录执行 npm install webpack webpack-cli vue-loader css-loader vue-template-compiler vue-style-loader webpack-dev-server -D 或 yarn add webpack webpack-cli vue-loader css-loader vue-template-compiler vue-style-loader webpack-dev-server -D 安装相应的依赖。
创建基础文件：在项目根目录创建 src/index.html、src/main.js 和 src/App.vue 文件。

配置 Webpack：在项目根目录创建 webpack.config.js 文件进行 Webpack 配置，示例如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: './dist',
    port: 8080
  }
}

配置 Babel：在项目根目录创建 .babelrc 文件进行 Babel 配置，示例如下：
```
{
  "presets": ["@babel/preset-env"]
}
```

配置 Vue：在项目根目录创建 src/main.js 文件，导入 Vue 模块，并配置 Vue，示例如下：
```
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
```
配置 App.vue：在项目根目录创建 src/App.vue 文件，编写 Vue 组件模板代码，示例如下：
```
<template>
  <div>
    <h1>Hello, Vue + Webpack!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
h1 {
  color: red;
}
</style>
```
执行构建：在项目根目录执行 webpack-dev-server --open 命令启动开发服务器，在浏览器中打开 http://localhost:8080 即可运行项目。

以上是使用 Webpack 构建 Vue 项目的基本步骤，根据实际情况需要进行相应的调整和配置。

******************************************************************************************

@babel/preset-env 是 Babel 的一个预设，其作用是根据不同的环境自动配置需要使用的转换插件，以达到向下兼容的目的。具体来说，@babel/preset-env 会根据当前的 JavaScript 运行环境，自动启用需要的转换插件，将当前使用的 ECMAScript 新特性转换为目标环境所支持的代码。

例如，如果当前项目需要兼容到 IE11 等老旧浏览器，那么就需要使用 @babel/preset-env 进行相应的配置，该预设会根据目标环境自动启用一些转换插件，比如将箭头函数转换为普通函数、将 ES6 模板字符串转换为普通字符串等等。

需要注意的是，@babel/preset-env 并不能对所有的新特性都进行转换，一些比较复杂的新特性可能需要手动配置相应的插件才能实现向下兼容的目的。

在使用 @babel/preset-env 时，可以在 .babelrc 或 package.json 文件中进行配置，例如：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "IE >= 11"
          ],
          "node": "current"
        }
      }
    ]
  ]
}