Vue2.0项目入门 — 详解Vue-cli webpack模板

Vue2.0项目入门 — 详解Vue-cli webpack模板

项目结构:

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹,一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件,比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的,可参照github上star多的项目。
build/

这个目录包含实际为开发环境与生产环境的webpack配置文件。通常你不需要关注这些文件,除非你想自定义webpack的loader,这样的话,应当先看看build/webpack.base.conf.js这个文件。

src/

这个是你放绝大部分程序代码的地方。如何管理这个目录内的所有内容随你决定;如果你使用Vuex,建议的结构一般是这样的:

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

static/

这个目录是你不想通过webpack处理的静态资源目录。这些目录中的资源会在webpack构建的时候,被直接复制到相同的目录中。

<blockquote>

你应该注意到了,在项目结构上我们有静态资源两个目录:src/assets和static/。他们之间有什么区别?

详细说明请点击Vue2.0项目入门—静态资源目录src/assets和static/区别

</blockquote>

test/unit

包含单元测试相关文件。

test/e2e

包含端到端测试相关文件。

index.html

这个是单界面应用中的模板Index.html。在开发环境中,webpack会生成相关资源,这些资源的url会自动插入到模板来渲染最终的HTML。

package.json

npm包元数据文件,包括所有的构建依赖与构建命令。

所有的构建命令,都会通过NPM脚本执行。

npm run dev

<blockquote>

启动一个Node.js本地开发服务器。

</blockquote>

  • webpack+vue-loader来处理vue单文件组件
  • 状态支持热更新
  • 状态支持浮层显示编译错误
  • 在保存的时候,通过ESLint做语法检测
  • 可以开启Source maps

npm run build

<blockquote>

构建生成环境的资源。

</blockquote>

  • 通过 UglifyJS压缩JS文件。
  • 通过 html-minifier来压缩html文件。
  • 通过 cssnano,提取出所有组件内的css文件,合并压缩到一个单独的文件。
  • 所有的静态资源会编译成哈希值版本来保持长期缓存,生成环境的index.html会自动插入这些编译后资源文件的url。

npm run e2e

<blockquote>

端到端测试。

</blockquote>

  • 在多个浏览器中并行运行测试
  • 通过盒子里的一个命令工作。

    自动处理 Selenium 和 chromedriver 依赖.

    自动创建 Selenium 服务器.


作者:大青呐

链接:jianshu.com/p/a501690dc

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发布于 2018-05-02 13:30