认识vue3.0项目的目录结构

上一篇笔记 新建一个vue3.0项目

新建项目后，用vscode打开，会看到项目目录，如下图

来看看我们新建的项目里有哪些内容

node_modules	npm 加载的项目依赖模块
public	用于存放静态资源，不会被压缩、合并
src	主要开发内容都在这个文件夹下，包含以下几项： ① assets：存放图片、logo ② components:：存放组件 ③ router： 存放路由（路由用于界面之间跳转） ④ store：仓库 （与vuex有关） ⑤ view：初始的界面组件 ⑥ App.vue:：项目入口文件 ⑦ main.js ：项目的核心文件
package.json	项目配置文件（在里面可以看到用了哪些依赖和技术）
README.md	项目说明文档 （可以看到运行项目的命令）

开始学习需不求甚解，不可操之过急，慢慢来雪球会越滚越大的。
 

进一步详细的来看单个文件中的内容：

1.重要的核心文件main.js

两大部分，一导入了组件、路由等，二使用createApp这个 API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法

这也是与vue2.0不同之处，2.0创建一个vue 实例是通过 new Vue()来实现的

2.那把实例挂载到了id为#app的dom上，这个dom写在哪里呢？就在index.html里

首页入口文件，你可以添加一些 meta 信息或统计代码啥的 

3.项目的入口文件App.vue

两个路由对应了界面上两个链接

home页面

注：我删除了初始化时多余的代码，结果报错不能出现空行。原因是lint的设置有问题，用--fix修复就好（步骤：package.json中将lint的配置改为 "lint": "eslint --fix --ext .js,.vue src"）

主页面的msg就是只简单赋值，子页面再声明类型，就可以用了

 了解了大致结构，简化得到了一个干净的初始项目

快捷传送下一篇：vue3.0的基础语法（一）指令绑定