webpack下的vue项目文件结构

开发环境

1. 全局安装node.js ，也可以使用nvm（node version manager）node版本管理器安装不同版本
2. 全局安装vue vue-cli

npm install vue vue-cli -g
cnpm install vue vue-cli -g

3. 创建项目

vue init webpack my-project

创建步骤

• project name？ 项目名称
• project description？ 项目描述
• author？ 作者
• vue build？打包方式回车即可
• install vue-router？是否安装vue-router，需要y
• use up unit tests？是否安装，单元测试工具，现在不会n
• setup e2e tests with nightwatch？是否安装，单元测试工具目前不会n
• 最后一部选择运行命令即可

进入项目文件夹

cd my-project

安装依赖

cnpm install

在本地端口运行

npm run dev

项目创建成功

image.png

复制地址到浏览器运行

image.png

---

生成的文件夹如下

image.png

• build/ 编译用到的脚本

  • build文件夹中保留了各种打包脚本，不可或缺，不可随意修改
  1. build.js: 打包使用，不能修改
  2. check-version.js：检查npm的版本，不能修改
  3. utils.js：不能修改，做一些css/sass等文件的生成
  4. vue-loader.conf.js: 重要配置文件，不能修改，用于辅助加载vue.js用到的css source map等
  5. webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js: 这三个文件都是基本的配置文件，不能修改

• config/ 各种配置

  • 与部署和配置相关
  1. dev.env.js：开发模式下的配置文件，一般不用修改
  2. prod.env.js：生产模式下的配置文件，一般不用修改
  3. index.js：重要文件，定义了开发时的端口、图片文件夹（默认static），开发模式下的代理服务器

• dist/ 打包后的文件夹 该文件夹需要运行npm run build 打包命令才会生成

  • 文件夹结构如下

    
    
    image.png
  • !文件名中无意义的字符串是随机生成的，目的是让文件名发生变化，方便部署，同时方便Nginx服务器重新对文件进行缓存
  1. app.css：编译后的css文件
  2. app.js：最核心的js文件，几乎所有的代码逻辑都会打包到这里
  3. manifest.js：生成的周边js文件
  4. vendor.js：生成的vendor.js文件
  5. 每个.map文件都很重要，简单理解有了.map文件，浏览器就可以先下载整个.js文件，然后再后续的操作中部分加载对应的文件
     这个文件不能放到git中，因为每次编译之后，这里的文件都会发生变化

• node_modulse/ node第三方包

  • node项目用到的第三方包特别多，也特别大，这些文件是由npm install 命令产生；所有再package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
  • node_modules中往往会有几百个文件夹
  • 注意，这个文件夹不能放到git中

• src/ 源代码

  • src文件夹是核心源码的所在目录，结构如下

    
    
    image.png
  1. assets文件夹用到的图片都可以放在这里
  2. components用到的"视图"和"组件"所在的文件夹（核心）
  3. router/index.js是路由文件，定义各个页面对应的url
  4. 如果index.html是一级页面模板的话，App.vue就是二级页面，所有的其他Vue.js页面都作为该模板的一部分被渲染出来。
  5. main.js没有实际的业务逻辑，但为了支撑整个Vue.js框架，有必要存在

• static/ 静态文件，存放的文件不会经过webpack处理，可以直接引用

• index.html 最外层文件

• package.json node项目配置文件