vue后台管理系统项目标准完整的目录开发架构
2022-08-03 09:57:03
222
{{single.collect_count}}

vue-cli@3.x 之前的版本构建的项目目录:

vue项目标准目录结构

vue-cli@3.x 之后的版本构建的项目目录:

vue新版项目目录结构

两者区别:

安装创建命令:

3.x版本以前:

npm i -g vue-clivue init webpack project

3.x版本以后:

npm install -g @vue/clivue create project

区别1: 下载npm包的包名变化。 vue-cli ==> @vue/cli。
区别2: 生成的vue项目目录的命名改变,同时生成的目录结构,也隐藏了webpack配置文件,及新增一些.env.xxx配置文件来设置相关环境变量。

区别1详解: npm发布了新的包命名规则。具体请查看npm包命名规则变更
区别2详解: vue-cli将webpack配置的细节隐藏。需要自己创建vue.config.js来配置。具体请查看配置文档

注意:里面的部分文件夹可根据自己项目需求进行删减(比如lang,icons,mock,vendor这些文件夹),vendor文件夹用来存放第三方提供的功能插件等。static文件夹下一般放一些静态资源(比如静态资源图片等)。
回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}