2021-06-22 总结

Posted 2021-06-23 realzhaijiayu

Vue 项目结构

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统

1. package.json

记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）
比如某一个模块的版本有3.0.0、3.1.0、3.2.0，此时本机中的版本号是3.0.0，使用 npm install 会更新该模块的版本为 3.2.0，如果只想要 3.1.0 版本的模块 A，就无需修改 package.json ，只需要使用指令 npm i A@3.1.0

2. package-lock.json

记录了 node_modules 目录下所有模块的具体来源和版本号以及其他的信息。

3. babel.config.js

Vue 3.0 特有，Babel的配置文件，作用于整个项目。

Babel 是一个 JS 编译器，主要作用是将ECMAScript 2015+ 版本的代码转化成向后兼容的 JS 语法，以便能够运行在当前和旧版本的浏览器或者其他环境中。Vue 项目普遍使用 ES6 语法，若要兼容低版本浏览器，就需要引入 Babel，将 ES6 转换为 ES5

4. main.js

main.js 程序入口文件，是初始化vue实例并使用需要的插件，加载各种公共组件。

5. App.vue

就是一个普通的组件，以”App“命名，标识该组件是程序的入口组件，最先渲染该组件

Vue 里面的 export 关键字

将本模块中导出，以便其他模块中 import

export 中有几个字段，
name：组件名称
data：表示该组件中定义的模板数据
props：表示该组件的属性