Vscode+Pycharm+Vue.js+WEUI+django火锅(三）理解Vue

新创建的Vue项目里面很多文件，对于新手，老老实实做一下了解。

1.框架逻辑
框架的逻辑都是相通的，花点时间理一下就清晰了。

2.文件目录及文件
创建好的vue项目下，主要的文件和文件夹要先认识一下，并与框架逻辑对应起来
public下面的index.html
src下面主要文件：
main.js  主js文件
App.vue 主组件：主要三部分script/template/style

看其它人的文章，应该是有Router文件夹，而我的没有，于是
npm install vue-router安装
安装完成了，依赖里面是有了。
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.4.5"
  },
但是文件夹里面没有router,手工创建文件夹还需要继续:
a.创建index.js
b.修改main.jsp，添加：
c.import router from './router'
改起来觉得这很麻烦，于是决定删除重建，因为最根本原因就是自己安装时使用默认安装导致，删除项目文件夹，重建后OK。

3.主js文件：main.js

import { createApp } from 'vue'
import App from './App.vue'  
import router from './router'  ---引入了路由

createApp(App).use(router).mount('#app')--初始化

4.路由文件：router/index.js
{
    path: '/about',   //访问路径
    name: 'about',  //显示的名字
    component: () => import('../views/AboutView.vue') //调用路由时加载的视图或组件
  }

5.主组件App.vue
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>//是承接自路由的容器  （这个不要删除，很多时候路由了但页面不显示，多半原因出在这里）
</template>
这些理清楚后，Vue的大门算是摸着了。