(三)创建得vue项目的初始目录结构分析

1：首写加载commponents下面得main.js

2：在main.js文件里面导入App.vue,当然也可以导入自己的Vue页面,不导入App.vue，#app1就是public文件下面的index.html里面的

import { createApp } from 'vue' import App from './App.vue' //import App from './components/TestMain'  createApp(App).mount('#app1')   3：在App.vue具体做的事情分析，如下图， (1)导入了HelloWorld.vue页面 import HelloWorld from './components/HelloWorld.vue' (2)注册组件HelloWorld export default {   name: 'App',   components: {      HelloWorld     //Test   } } (3)引用组件,在引用组件的时候传值(msg1,msg2)，这样HelloWorld.vue的内容都加载到了app.vue里面去了

4：HelloWorld.vue接收msg,msg2的方式为

{{ msg1 }} {{msg2}}

并且在 这样就能显示msg1,msg2的值了

文件存放规则:

1：public下面方公共样式css文件，以及公共图片视频等文件

2：公共插件的封装可以放在components里面,在componets里面进行新建文件夹进行组件归类(如ECharts，TextArea等)

2：src下面可以创建一个views文件夹,里面在建不同文件夹,存放不同类型的业务流程

3：系统页面需要引用的那些公用的js,可以放在src下面,并建不同的文件夹归类