目录结构图
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 执行的命令就是在此配置。