上一篇笔记 新建一个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的基础语法(一)指令绑定