Vuecli项目结构，及组件的使用

根目录文件介绍

node_modules ：管理项目中使用的依赖
public：存放一些静态资源，webpack打包时会放入dist文件夹内。
src：书写vue源代码【重点】
.gitignore ：存放需要被git忽略文件（不需要保存）的文件名
babel.config.js：将es6语法转为es5运行
jsconfig.json：指定根文件和JavaScript语言服务提供的功能选项
package.json ：类似pom的的依赖管理文件
package-lock.json：对package.json的锁文件
README.md ：阅读文档
vue.config.js ：项目配置文件，在@vue/cli-service 启动的时候会自动加载

src 文件介绍

assets：存放静态资源
components：存放自定义组件
router：配置项目路由
store：全局存储参数
views：页面级组件
App.vue：项目根组件
main.js：项目主入口

main.js 介绍

main.js 可以根据路由找到根组件，App.vue 并且展示内容

import { createApp } from 'vue'  //导入createApp函数从vue中
import App from './App.vue'      //导入组件App.vue
import router from './router'    //引入router
import store from './store'      //引入store
// const app = createApp(App); ---> 使用createApp创建应用实例app
// app.use(store).use(router); ---> 实例app使用store和router
// app.mount('#app');          ---> 应用实例挂载到app中(接管id名为app的div区域),即public.index页面
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

1
2
3
4
5
6
7
8
9
10

Router.js介绍

组件的使用

1：在script中引入组件
2：在export default中定义组件
3：使用组件

开发方式

组件式开发

开发于业务模块对应的组件，组合成一个前端系统
开发的vue组件，打包时vue cli 会将其编译成html文件