vue框架目录结构（全）

妖狐艹你老母 2022-12-20 02:13 283阅读 0赞

使用vue init webpack 项目名称命令创建的vue-cli2的项目目录

![20201109150813227.png][]

目录说明：

bulid:项目构建相关代码
    config：配置目录，包括端口号等
    node_modules:npm加载的依赖模块
    src:我们要开发的目录，基本上要做的事情都在这个目录里。里面包括几个目录及文件：
        assets:放置一些图片
        components:组件文件，可以不用
        router：配置路由跳转
        views：存放页面
        App.vue:项目入口文件，我们可以把组件写在这里，而不是用components目录
        main.js:项目核心文件
    static：静态资源目录，如图片、字体等
    .babelrc:用来设置转码规则presets和插件plugins
    .editorconfig:用来配置编码规则
    .gitignore:过滤，向git提交代码时不需要提交
    .postcssrc.js：用来兼容浏览器
    index.html:首页入口文件
    package-lock.json:
    package.json:项目配置文件
    README.md:项目说明文档，Markdown格式

使用vue create 项目名称命令创建的vue-cli3的项目目录

![2020110916573331.png][]

目录说明：

node_modules:npm加载的依赖模块
    public：用来放一些公共的东西
        favicon.ico:用来放置一些公共图标
        index.html:首页入口文件
    src:我们要开发的目录，基本上要做的事情都在这个目录里。里面包括几个目录及文件：
        assets:放置一些图片
        components:组件文件，可以不用
        App.vue:项目入口文件，我们可以把组件写在这里，而不是用components目录
        main.js:项目核心文件
    .browserslistrc:设置浏览器兼容
    .eslintrc.js:eslint检测,配置代码检查
    .gitignore:过滤，向git提交代码时不需要提交
    .postcssrc.js：用来兼容浏览器
    bable.config.js:babel语法编译 
    package-lock.json:
    package.json:项目配置文件
    README.md:项目说明文档，Markdown格式

[20201109150813227.png]: /images/20221120/6504a1619e904daaada6d546c0c75adb.png
[2020110916573331.png]: /images/20221120/a962402e35cb4ad99c4ab1113552e47b.png