almost最好的Vue + Typescript系列02 项目结构篇

BicycleWarrior 发布于2019-08-30 14:08 / 1444人阅读

摘要：源码文件夹，基本上我们的业务逻辑文件都应该放在这里定义了这个项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。

基于vue-cli 3.x,配合typescript的环境构建的新vue项目,跟以前的结构相比,有了一些变化,下面我们来简单的了解一下

基本结构:

node_modules: 项目中安装的依赖模块

public: 主页文件index.html && favicon.icon(将以往多带带在外部的index.html移到了public文件夹下),index.html我们可以像平时普通的html文件一样引入文件(css,js)和书写基本信息，添加meta标签等。

src: 源码文件夹，基本上我们的业务逻辑文件都应该放在这里

package.json: 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境

package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。可参考: npm install 生成的package-lock.json是什么文件？有什么用？

tsconfig.json: 指定了用来编译这个项目的根文件和编译选项可参考: tsconfig.json

tslint.json: ts语言的语法检查,具体的操作和配置参数可参考我的另外一篇文章:almost最好的Vue + Typescript系列01 环境搭建篇

src文件,详细目录结构:

在这里我根据平时项目经验,整理了一个分类比较合理的目录 ↓

api: 根据项目业务不同的模块进行分类,封装业务接口,如:

assets: 静态文件资源,通常我们用来存放一些公共的css,images,以文件夹区分:

common: 我们习惯放一些公共的ts文件,如封装好的网络请求

utils: 这个就比较熟悉了,存放一些小的工具文件

store: vuex状态管理工具的相关文件

views && components: 这里就涉及到木偶组件和智能组件(后续详解,也可先阅读其他资料)

- views:  智能组件
- components: 木偶组件

app.vue: App.vue组件,整个项目的最外层组件,包含三个部分，一个是模板(html)，一个是script，一个是样式(css)

main.ts: 入口文件,可以引入一些插件或静态资源的包，当然引入之前要先安装了该插件

router.ts: 路由配置文件

该篇主要介绍了下基于vue-cli 3.x 的项目结构,怎么使项目看起来更加的合理和规范,下一篇将聊聊关于网络接口的请求封装

私有云混合云云计算系列服务器篇云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115796.html

almost最好的Vue + Typescript系列02 项目结构篇

摘要：源码文件夹，基本上我们的业务逻辑文件都应该放在这里定义了这个项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。基于vue-cli 3.x,配合typescript的环境构建的新vue项目,跟以前的结构相比,有了一些变化,下面我们来简单的了解一下基本结构: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

DTeam 2019-08-22 15:20 评论0 收藏0
almost最好的Vue + Typescript系列02 项目结构篇

摘要：源码文件夹，基本上我们的业务逻辑文件都应该放在这里定义了这个项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。基于vue-cli 3.x,配合typescript的环境构建的新vue项目,跟以前的结构相比,有了一些变化,下面我们来简单的了解一下基本结构: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

Clect 2019-08-01 18:41 评论0 收藏0
almost最好的Vue + Typescript系列01 环境搭建篇

摘要：初来乍到，请多多关照也许这是第一套基于搭建基于的项目教程。年月初升级到了新的版本版，跟版本项目结构发生了很大的改变，目录结构更简洁更科学。并且可以选配，在此之前配置略麻烦，是的超级，静态类型，便捷的注解，使前端代码优雅。前言 hello~ 大家好。初来乍到，请多多关照 ?(๑•̀ㅂ•́)و✧也许这是第一套基于 vue-cli 3.x 搭建基于 typescript 的vue项目教程...

isLishude 2019-08-22 15:20 评论0 收藏0
基于vue + element ui的table编辑,保存和删除

摘要：在最近年的工作中遇到过几次很基础的基于的开发简单的增删改查功能闲下来想整理一下以备后用架子用最新的此处可以参考我之前的最好的系列环境搭建篇项目基础构建好以后这个小我们暂且将数据存在之后我将更新基于前端操作数据库的操作点击新增按钮点击保存在最近2年的工作中遇到过几次很基础的基于element-ui的table开发,简单的增删改查功能,闲下来想整理一下~ 以备后用 vue架子,用最新的...

frontoldman 2019-08-22 18:08 评论0 收藏0