vue 3.0 怎么引入elementui报错_vue-cli2项目升级vue-cli4（一）

一. 安装vue-cli4

官方安装步骤^[1]

# OR
yarn global add @vue/cli

vue-cli4新创建一个空项目

vue create my-project

迁移静态文件

模板index.html和静态图片资源文件迁移到项目中public文件夹下

迁移src中文件

先迁移main.js和App.vue
同时新建vue.config.js，配置好代理
然后npm run server一下，会报错，提示一些第三方插件未安装，npm i XXX安装第三方插件直到不报错

然后慢慢迁移src其他路由、请求和页面，页面中有引入第三方插件，会报错提示，按提示安装就可以

第三方插件安装遇到问题

• vue-awesome-swiper依赖swiper，所以两个都需要安装
• swiper版本注意一下: 6.0.0及以上版本引入css时：import 'swiper/swiper-bundle.css' ，之前的版本引入css: import 'swiper/css/swiper.css'，详细内容参考资料^[2]

To install it, you can run: npm install --save swiper/css/swiper.css
// import style ; 查看git: https://github.com/surmon-china/vue-awesome-swiper
import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
// import 'swiper/swiper-bundle.css'

• npm run build报错：

Module build failed (from ./node_modules/_postcss-loader@3.0.0@postcss-loader/src/index.js):

Error: Loading PostCSS Plugin failed: Unknown browser query `dead`

解决方法参考：https://www.jianshu.com/p/ae0623fac11e， 移除“not dead”

• VW适配方案后造成伪类使用content报错的解决办法 already has a 'content' property, give up to overwrite it. 参考资料^[3]

'postcss-viewport-units'

or

'postcss-viewport-units'

下一章记录一下vue.config.js配置

参考

1. ^vue-cli安装 https://cli.vuejs.org/zh/guide/installation.html
2. ^vue-awesome-swiper https://github.com/surmon-china/vue-awesome-swiper
3. ^vw适配后伪类报错 https://blog.csdn.net/weixin_45784283/article/details/105482067