笔记||vue3初探

今天摸索了下webpack,然后迫不及待想试试vue。

略过vue2,直接从vue3开始吧，先会再精。

参考资料：菜鸟+官文

还记得当初我们领导面试我的时候，问的一个问题：MVC中，哪一层最不重要。

直到我遇见VUE，大神都说VUE是MVVM结构的，就是视图和模型层实现了双向绑定，她的妙用，可能需要等我彻底熟悉vue后，才能体会了。

今天就先搭建一个vue项目，并写几个小例子吧~

开干：依赖：node.js >= v16.0

1、安装vue：项目根目录运行命令：npm init vue@latest         //安装最新版本的vue

（这个方法我觉得不太好用，会在项目根目录下再创建一个vue的文件夹，作为新手，先凑合着用，后面再看其他的方法）

官方推荐的IDE配置：vscode+volar

2、配置

我对比了下早上安装webpack时的package.json和刚刚安装vue时的package.json,他们之间有些不同：

vue webpack

vue安装后，默认使用vite打包，既然已在学习webpack，我就希望先把webpack学好，因此我尝试修改配置，将vite改成webpack

显然，这是不可能成功的，于是我又翻看了一些大神笔记和官文。其中webpack的官文给了我很多启发：

官文地址：https://webpack.js.org/loaders和https://webpack.js.org/concepts/loaders/#configuration

安装所需要的插件 配置文件

https://webpack.js.org/loaders这里讲述了一些常用的插件，按照安装插件的方式将其安装好，再在配置文件（根目录下的webpack.config.js）的module.rules中引入。

不同的版本，插件的内容也不一样，比如，vue-loader,网上很多都说require('vue-loader/lib/plugin'),但是我安装了很多次，vue-loader中只有dist,因此，我将路径改了下，改成：require('vue-loader/dist/plugin'),再在配置文件中，新增plugins,如：

    plugins: [new VueLoaderPlugin()]

再在根目录运行命令：webpack

打包成功，也没有报错，最后记录下我的配置文件：

配置文件全文

打包的结果是在根目录多了dists文件夹,文件夹下包含bundle.js和一个svg(这个是将一个svg图片给打包了)。

然后在index.html中，将引入的js换成bundle.js，就可以在浏览器运行了。