前面介绍了搭建一个基础的ANTD for VUE3 项目后，我们今天来熟悉一下前端的项目目录结构
目录结构
其中
|-node_modules -- 所有的项目依赖包都放在这个目录下
|-public -- 公共文件夹
---|favicon.ico -- 网站的显示图标
---|index.html -- 入口的html文件
|-src -- 源文件目录，编写的代码基本都在这个目录下
---|assets -- 放置静态文件的目录，比如logo.pn就放在这里
---|components -- Vue的组件文件，自定义的组件都会放到这
---|App.vue -- 根组件，这个在Vue2中也有
---|main.js -- 入口文件
|-.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js -- Eslint的配置文件，不用作过多介绍
|-.gitignore -- 用来配置那些文件不归git管理
|-package.json -- 命令配置和包管理文件
|-README.md -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json -- 关于TypoScript的配置文件
|-yarn.lock -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中
组件库
在package.json中定义,你可以使用命令行在项目文件夹中运行npm install XX安装组件
也可以在在package.json中新增、修改、删除所需要的组件，然后运行npm run serve
VueRouter
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。（传统页面切换是用超链接a标签进行切换）VueX
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)
1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用
src目录
对于目前的antd vue项目，src的目录结构如下图
|-src -- 源文件目录，编写的代码基本都在这个目录下
---|assets -- 放置静态文件的目录，比如logo.pn就放在这里
---|components -- Vue的组件文件，自定义的组件都会放到这
---|layouts -- 布局文件，如后台管理的基础左右布局或一些页眉、页脚
---|router -- 导航文件，定义了通过地址栏输入的地址去向
---|store -- vuex组件
---|utils -- 工具包
---|views -- 存放具体的vue文件，形同原来的html/*
---|App.vue -- 根组件，这个在Vue2中也有
---|main.js -- 入口文件Vue3 的代码结构
对于一个普通vue页面，仅需在views下选择对应的目录下创建一个vue文件
template类比于html的body
script与style与html的一样
一、如何引入组件或其他页面、工具
与普通html引入方式不同，vue对于组件、页面的引入使用的是import，写在script中
import {defineComponent, reactive, onMounted, ref} from 'vue';二、如何引用外部js
vue引入外部js的方式与html相同
三、export 与export default
export和export default都用于导出常量、函数、文件、模块等，区别是：
1、在一个JS文件中，export可以有多个；export default只能有一个；
2、它们的引用方式不同；具体使用：
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}对应的导入方式：
//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号export default的使用
//demo3.js
export default const str = 'hello world'对应的导入方式：
//demo4.js
import str from 'demo1' //导入的时候没有花括号
文章评论