Vue(Vue2+Vue3)——79.分析vue3.0初始化工程结构

简介: Vue(Vue2+Vue3)——79.分析vue3.0初始化工程结构

79 分析vue3.0初始化工程结构


以下就是整个初始化完成后的vue3.0工程结构,基本和vue2.0是一致的,每一个包的位置包括命名都和vue2.0十分的相似

唯一不同的就是main.js里面的代码


main.js


如果在vue3中写vue2的main.js那一套,肯定是不行的,不能兼容老版本的写法的


组件模板结构根标签的使用


还有一个重要的地方,vue2.0中必须要使用根标签包裹组件模板内容,但是vue3不需要根标签

如果给vue3加了根标签也不会报错

除了上面两个地方之外,vue3.0初始化工程结构和vue2.0是一样的

├── node_modules 
        ├── public
        │   ├── favicon.ico: 页签图标
        │   └── index.html: 主页面
        ├── src
        │   ├── assets: 存放静态资源
        │   │   └── logo.png
        │   │── component: 存放组件
        │   │   └── HelloWorld.vue
        │   │── App.vue: 汇总所有组件
        │   │── main.js: 入口文件
        ├── .gitignore: git版本管制忽略的配置
        ├── babel.config.js: babel的配置文件
        ├── package.json: 应用包配置文件 
        ├── README.md: 应用描述文件
        ├── package-lock.json:包版本控制文件
相关文章
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
8 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript
vue知识点
vue知识点
6 2
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
8 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
9天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
29 9
|
9天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
24 7