目录结构图

build 文件夹

build文件夹为 构建脚本目录

Build.js – npm run build的入口文件。

Build.js是webpack的打包文件,通过配置package.json中的script下面来执行脚本。

npm run build 其实就是运行的 node build/build.js

config 文件夹

build文件夹为 webpack的相关配置

1、index.js – 用来定义开发环境和生产环境中所需要的参数

        npm run dev – 开发环境
        
        assetsSubDirectory – webapck资源会被编译到static目录(静态资源目录)
        
        assetsPublicPath – index.html里面引用资源的相对地址
        
        port  - 运行测试页面的端口
        
        autoOpenBrowser – 运行后项目是否自启 
        
        errorOverlay – 浏览器错误提示遮罩层
        
        useEslint – 是否使用eslint-loader模块
        
        showEslintErrorsInOverlay – eslint浏览器错误提示遮罩层
        
        npm run bulid – 生产编译
        
        index – 编译输入的index.html文件
        
        assetsRoot – 编译输出的静态资源路径
        
        assetsSubDirectory – webapck资源会被编译到static目录(静态资源目录)
        
        assetsPublicPath – index.html里面引用资源的相对地址
        
2、dev.env.js – 开发环境的变量,在build文件下webpack.dev.conf.js中引入了此变量
        
        dev.env.js里面的变量为全局变量,process.env可以访问到
        
        dev.env.js通过merge来合并对象然后导出合并的值
       
        process – node中的一个全局对象,保存着项目运行中的所有环境信息
        
        process.env – env 是process的一个属性用来保存项目中的环境变量

        BASE_API – 开发环境api接口地址       

3、prod.env.js – 生产环境的变量,在build文件下webpack.prod.conf.js中引入了此变量
        
        配置内容同 dev.env.js,区别在于一个用于开发环境,一个用于生产环境。
        
        BASE_API – 生产环境api接口地址

dist 文件夹

打包生成的文件

执行 npm run build 打包之后动态生成的打包文件

config - index.js里面配置的打包路径

src 文件夹

资源文件夹,在此目录下编写代码

scr文件夹底下包含了:

    api - 接口
    
    assets - 静态资源文件
    
    components - 项目组件
    
    icons - icon图标
    
    router - 路由表
    
    store - vuex状态管理
    
    styles - 样式文件
    
    utils - javascript文件
    
    views - vue视图页面
    
    App.vue - 根实例下的一个子组件(main.js里面有一个vue实例,挂载的元素就是框架根目录下的index.html中的 <div id="#app"></div>)
    
    main.js - 入口文件(因为main.js为入口文件不适合写逻辑,所有分出一个app.vue)

static 文件夹

静态资源(图片、json数据之类)

package.json 文件夹

项目基本信息(所需模块、名称、版本...)

package.json 里面有一个scripts配置,项目运行 npm run dev/build 执行的命令就是在此配置。