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的大门算是摸着了。
原文地址：https://blog.csdn.net/samson_www/article/details/142662778
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！