用Vue CLI搭建项目搭建项目要让IE11兼容我们需要对Babel进行配置

一、用Vue CLI搭建项目

想要让Vue应用在IE11上跑得欢？你得用Vue CLI来快速建立一个项目。Vue CLI自带了很多好用的工具和配置，可以轻松设置兼容性。

1. 先装上Vue CLI：
   npm install -g @vue/cli
2. 创建一个新的Vue项目：
   vue create my-vue-project
3. 选择默认配置或者手动配置，记得勾选Babel哦。

二、配置Babel进行转译

Babel是个JavaScript编译器，可以把新版的JS代码转成旧版浏览器能理解的代码。要让IE11兼容，我们需要对Babel进行配置。

1. 安装必要的依赖：
   npm install --save-dev @babel/core @babel/preset-env babel-loader
2. 在项目根目录下创建或修改.babelrc文件，内容如下：

{ "presets": ["@babel/preset-env"] }

三、引入Polyfills

Polyfills就像是给旧浏览器安装的新功能，让它们支持现代JavaScript。为了让IE11兼容，我们需要引入一些Polyfills。

1. 安装core-js和regenerator-runtime：
   npm install --save core-js regenerator-runtime
2. 在项目的入口文件（通常是main.js）中引入Polyfills：

import 'core-js/stable'; import 'regenerator-runtime/runtime';

四、解决CSS兼容性问题

IE11对CSS的支持有点老，可能需要调整和引入一些Polyfills来保证样式兼容。

1. 使用Autoprefixer来自动添加浏览器前缀：
   npm install autoprefixer postcss-loader
2. 在postcss.config.js中配置Autoprefixer：

module.exports = { plugins: { 'postcss-autoprefixer': {} } }

处理CSS变量：

1. 安装postcss-css-variables：
   npm install --save-dev postcss-css-variables
2. 在postcss.config.js中配置postcss-css-variables：

module.exports = { plugins: { 'postcss-css-variables': {} } }

五、实例说明和数据支持

创建一个简单的Vue组件，并在IE11上测试它，比如让文本显示为蓝色：

<template> <div :style="{ color: themeColor }">Hello, IE11!</div> </template> 

通过以上步骤——使用Vue CLI创建项目、配置Babel进行转译、引入Polyfills、解决CSS兼容性问题，你的Vue应用就可以在IE11上正常运行啦！记得测试测试再测试，遇到问题及时解决。

相关问答FAQs