vue项目总结之文件夹结构配置详解


前言

之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助。

基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。下面随着小编来一起学习学习吧。

项目配置

首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉。本次开发使用到的有: vue , vuex , axios , elementUI 。

然后可以按官方指引,使用 vue-cli 搭建 vue 的项目,在项目里按照上面的文档尝试修改,加深理解:

# 安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外的 bug
$ npm install vue@2.1.6 element-ui@1.4.6 vuex axios
#全局安装脚手架
$ npm install -g vue-cli 
# 创建一个基于 webpack 模板的新项目my-project
$ vue init webpack my-project
# 进入项目目录
$ cd my-project
# 安装依赖
$ npm install
# 运行项目
$ npm run dev

运行之后,看到以下页面表明项目环境搭建成功:

项目结构

搭建成功后,使用编辑器打开项目目录,大致是这样的结构:

相关文件和文件夹的含义:

src 文件夹结构

src 文件夹里的文件夹设置是灵活的,可以根据自己的习惯进行,不必雷同。下面是这次项目的结构:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对来客网的支持。


相关链接