基于webpack5从0搭建Vue脚手架
[一篇文章说清 webpack、vite、vue-cli、create-vue 的区别 ](https://www.cnblogs.com/jyk/archive/2022/05/09/16248880.html)
1.搭建基本目录结构
-
开始创建一个项目,肯定需要一个html网页,并且引入打包后的js文件。
- dist目录下放的是发布版本的代码。
// dist/index.html <div id="app"></div> <script src="bundle.js"></script>
-
src下放的是我们的源代码。
// src/main.js // 入口文件 import Vue from "vue"; new Vue({ });
此时的目录结构:
2.安装相关依赖
-
npm i vue@2.7 element-ui axios
-
bundle.js还不存在,所以需要去安装开发依赖。
// -D: 开发依赖 // webpack是安装它的打包器本体,webpack-cli提供了终端命令,去调用这个webpack // loader在webpack里的作用:进行代码转换(比如把sass代码转换成css代码) // vue-loader 把.vue的文件提取出js代码,style,以及模板 // vue-template-compiler 转换.vue文件里面的html(vue模板编译器) // sass-loader 把sass代码转换成css代码 // css-loader 对css代码进行处理 // style-loader 通过style标签加到html里面去 // babel