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.