vue单页面模板说明文档（1）

Introduction

This boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and vue-loader. Make sure to also read vue-loader's documentation for common workflow recipes.

If you just want to try out vue-loader or whip out a quick prototype, use the webpack-simple template instead.

Quickstart

To use this template, scaffold a project with vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Project Structure

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

build/

This directory holds the actual configurations for both the development server and the production webpack build. Normally you don't need to touch these files unless you want to customize Webpack loaders, in which case you should probably look at build/webpack.base.conf.js.

config/index.js

This is the main configuration file that exposes some of the most common configuration options for the build setup. See API Proxying During Development and Integrating with Backend Framework for more details.

src/

This is where most of your application code will live in. How to structure everything inside this directory is largely up to you; if you are using Vuex, you can consult the recommendations for Vuex applications.

static/

This directory is an escape hatch for static assets that you do not want to process with Webpack. They will be directly copied into the same directory where webpack-built assets are generated.

See Handling Static Assets for more details.

test/unit

Contains unit test related files. See Unit Testing for more details.

test/e2e

Contains e2e test related files. See End-to-end Testing for more details.

index.html

This is the template index.html for our single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will be automatically injected into this template to render the final HTML.

package.json

The NPM package meta file that contains all the build dependencies and build commands.

Build Commands

All build commands are executed via NPM Scripts.

npm run dev

Starts a Node.js local development server. See API Proxying During Development for more details.

• Webpack + vue-loader for single file Vue components.
• State preserving hot-reload
• State preserving compilation error overlay
• Lint-on-save with ESLint
• Source maps

npm run build

Build assets for production. See Integrating with Backend Framework for more details.

• JavaScript minified with UglifyJS.
• HTML minified with html-minifier.
• CSS across all components extracted into a single file and minified with cssnano.
• All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.

npm run unit

Run unit tests in PhantomJS with Karma. See Unit Testing for more details.

• Supports ES2015+ in test files.
• Supports all webpack loaders.
• Easy mock injection.

npm run e2e

Run end-to-end tests with Nightwatch. See End-to-end Testing for more details.

• Run tests in multiple browsers in parallel.
• Works with one command out of the box:
  • Selenium and chromedriver dependencies automatically handled.
  • Automatically spawns the Selenium server.