vue项目目录结构详解

vue项目目录结构详解_第1张图片

     |-- build 构建脚本目录
          |--build.js ---- 生产环境构建脚本
          |--build-server.js ---- 运行本地构建服务器,可以访问构建后的页面
          |--dev-client.js ---- 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
          |--dev-server.js ---- 运行本地开发服务器
          |--check-version.js ---- 检查npm、node.js版本
          |--utils.js ---- 构建相关工具方法
          |--vue-loader.conf.js ---- 配置css加载器以及编译css之后自动添加前缀
          |--webpack.base.conf.js ---- webpack基本配置
          |--webpack.dev.conf.js ----- webpack开发环境配置
          |--webpack.prod.conf.js ---- webpack生产环境配置
      |-- config:项目配置
          |-- dev.env.js ---- 开发环境变量
          |-- index.js ---- 项目配置文件
          |-- prod.env.js ---- 生产环境变量
          |-- test.env.js ---- 测试环境变量
      |-- node_modules:npm加载项目的依赖模块
      |-- package.json
      |-- src (源码目录,名称不可修改)
          |-- rassets​:资源文件,比如存放 css,图片等资源。
          |-- component​:组件文件夹,用来存放 vue 的公共组件(注册于全局,在整个项目中通过关键词便可直接输出)
          |-- router​:用来存放 ​index.js​,这个 js 用来配置路由
          |-- ​tool​:用来存放工具类 js,将 js 代码封装好放入这个文件夹可以全局调用(比如常见的​ api.js​,​http.js​ 是对 http 方法和 api 方法的封装)。
          |-- ​views​:用来放主体页面,虽然和组件文件夹都是 vue 文件,但 views 下的 vue 文件是可以用来充当路由 view 的。
          |-- main.js​:是项目的入口文件,作用是初始化 vue 实例,并引入所需要的插件。
          |-- ​app.vue​:是项目的主组件,所有页面都是在该组件下进行切换的。
      |-- static 静态资源目录。不会被webpack构建
      |-- package.json:npm包配置文件,定义项目的npm脚本、依赖包等信息
      |-- README.md:项目的说明文档,markdown格式   
      |-- .gitignore   

你可能感兴趣的:(vue,vue.js,webpack,javascript)