Vue3 _ 14. Vue CLI HelloWorld 项目讲解

一、项目结构

将我们之前创建的 helloworld 项目使用 WebStorm 打开。

node_modules

这里存放的是安装 node 后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。

public

这里存放的一个 ico 图标，还有一个 index.html 文件，这个文件是核心，是必须要有的，因为我们需要有页面进行挂载。

src/assets

这里是存放一些静态资源的东西，好比放一些图片、音频、视频等。

components

这里是存放的是一些组件，我们后期会学习组件的开发。

router

router 中存放的是我们所有页面的路由信息。

store

这个是存放 Vuex 全局参数的地方，同样后期我们需要学习。

views

这里就是我们以后放页面的，这里可以引入我们的组件。

App.vue

这个是主页面，我们将所有的组件都会挂载到 App.vue，然后再讲 App.vue 渲染到 index.html 上。

main.js

这个是整个项目的配置文件，可以说我们很多东西都需要在这里进行配置。

剩下其他的我们一边学习一边再进行讲解~

二、配置讲解

我们现在是用的是 Vue 3 进行开发，有很多东西是和之前 Vue 2 不一样了，这里给大家做个对比。

Vue 2 中的 main.js

Vue 3 中的 main.js

可以看到哈，是不是感觉到不一样了。

还有一点就是引入的一些组件也有变化。以前使用 Vue 2 的时候，我们所引入的框架，有的并不能适配 Vue 3，类似于 Element 就不能直接引入到 Vue 3 的项目中，我们需要换成 Element-plus。

总的来说，Vue 3 可以说是一个非常大的革新，慢慢学吧~~~

这一篇东西不多，大家自己操作一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~