Vue JS single-page application project template based on VUE-CLI

introduce

Vue JS single-page application project template based on VUE-CLI has made some reasonable modifications and enhancements on the basis of VUe-CLI. Features include: debugging, building, code specification verification, unit testing, internationalization, etc.

Technology stack

reference

• Vue. Js Chinese website
• Vue – the router Chinese website
• Vuex Chinese website
• Vuex popular version tutorial
• Vuex shopping cart example
• Vue2.0 practice sharing in stages

use

#Download the code
$ git clone https://github.com/zhaotoday/vue.js.git

#Install dependencies
$ npm install

#Development and debugging
$ npm run dev

#build
$ npm run build

#Executing unit tests
$ npm run unit

#Perform e2E tests
$ npm run e2e

#Execute all tests
$ npm testCopy the code

Some modifications and enhancements to vue-CLI

1. Move the template file index. HTML from the root directory to the SRC directory and the build file index. HTML to the root directory

Reason: The index. HTML after the original VUe-CLI construction is stored in the dist directory. Usually, however, you need to commit the entire project to Git/SVN and deploy it, and the default home page to access is the built index.html.

2. Provide SASS support

#Install Node-sass and sass-loader
$ npm install --save-dev node-sass sass-loaderCopy the code

<! --The introduction of the style-->
<style lang="scss" scoped src="./theme/styles/index.scss">
</style>Copy the code

3. Use AXIOS as an Ajax solution

Vue-resource is officially not recommended as an Ajax solution. Use Axios instead.

#Install axios
$ npm install --save axiosCopy the code

Link, link

4. Add polyfill

#Install the core - js
$ npm install --save core-jsCopy the code

import 'core-js/es6/promise'Copy the code

5. Use Vuex for state management

#Install vuex
$ npm install --save vuexCopy the code

link

The project structure

| - build / / Webpack project build | | -- - config / / project development environment configuration/SRC/source directory | | - app/code/business | | | - Articles / / article business module | - Home / / homepage | | - Layout / / page Layout structure (in addition to the Login page) | | - Login / / Login page | | - NotFound / / 404 | | - Root / / Root page (you can add a global style here, etc.) | | - Unauthorized / / Unauthorized page (useful) in the development of related system permissions | | - components / / common components | | - i18n / / global internationalization | | - models / / data model (mainly used in the store) | | - the router routing configuration / / | | - routes routing configuration / / each business module | | - store / / Vuex state management | | -- actions. Js / / root level actions | | -- getters. Js / / root level getters | | -- mutations. Js / / root level mutations | | - types. The js / / root level mutation types | | - modules / / the local state of each business module management | | - state management articles / / article business module | | - utils/collection/tools | | - helpers / / help function set | | - auth. Js / / authority related | | -- env. | js / / environment configuration class | -- consts. Js / / constant configuration | | -- i18n. Js / / international class | | -- init. Js / / initializes the | | -- polyfill. Js / / polyfill | | -- rest. Js / / RESTful Request class | | - App. Vue / / page entry | | -- main. Js / / entrance program, to load a variety of common components | - static / / static files, such as: Picture, the JSON data, etc. | -. The babelrc / / Babel - loader configuration. | - editorconfig / / format code | -- package. JSON / / project basic informationCopy the code

Common component specification

| - SRC / / source directory | | - components / / utility components | | - MyComponent / / MyComponent component | | - index. The vue / / MyComponent entry | | - Theme / / MyComponent skin | | - images/images/MyComponent | | - the style of the styles / / MyComponent | | - index. The SCSS / / MyComponent The style of the entrance to the | | - utils / / MyComponent collection tools | | - the internationalization of i18n / / MyComponent | | - components / / MyComponent subcomponents | | - ChildComponent // ChildComponent is a child of MyComponent. The component specification is the same as MyComponentCopy the code

Business component specification

The business component is placed under/SRC /app, which is a page, with a route. Specification and common components have been.