Vue项目 --- 代码结构

生成webpack模板

如果已经安装了vue-cli,在项目根目录所在的目录下,执行下面命令。

vue init webpack my-project

如果没有安装vue-cli,可以在执行上面命令之前先执行下面的命令。

npm install --global vue-cli

默认代码结构
README.md --- 项目说明文件
package.json --- 定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。
package-lock.json --- 会自动为npm修改node_modules树或任何操作而生成package.json
LICENSE --- 开源协议
index.html --- 项目默认首页模板
.postcssrc.js --- 是对postcss的一个配置项
.gitignore --- git提交忽略文件清单
.eslintrc.js --- 里面配置了一些代码的规范,如果不按照规范写,会提示报错。
.eslintignore --- 指定不需按照eslint语法书写代码的文件清单
.editorconfig --- 指定了编辑器的一些配置项
.babelrc --- 语法解析器,将我们的代码转换成浏览器识别的语法
static --- 静态资源文件存放位置
node_modules --- 放的是项目依赖的一些第三方的包。
main.js --- 整个项目的入口文件
App.vue --- 根组件
router/index.js --- 路由管理配置文件
components --- 项目中的一些组件
assets/ --- 项目中用到的一些图片资源
config/ --- 放置的是项目的配置文件, 基础信息放在index.js中,开发环境配置信息dev.env.js,线上环境配置信息prod.env.js
build/ --- 项目打包用的配置项

结构调整:
一、将/compontents目录删除,添加目录结构/pages,然后当开发一个页面的时候,如home页面,我们创建一个/pages/home/Home.vue和/pages/home/compontents进行开发,compontents目录下放的是home页中的组件,如Header.vue等等。

二、创建/src/common目录,然后里面放公共的组件,例如画廊组件,我们创建一个/src/common/gallary/Gallary.vue和/src/common/gallary/compontents进行开发,compontents目录下放的是gallary的组件

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容