Preconditions:

  1. Familiar with Javascript + HTML5 + CSS3.
  2. Understand the ES2015 Module (export, Import, and export-default).
  3. Knowledge of NodeJS basics, common NPM commands, and use of NPM script (using NPM for package management in vUE projects).
  4. Understand the WebPack packaging tools (common configuration options and loader concepts). Webpack webpack.github. IO/is a module packaging tool. It treats each file in a pile as a module, finds out their dependencies, and packages them as deployable static resources. NPM installation is also required to use WebPack.

Start installation:

Building large single-page applications with VUe-CLI: the scaffolding tool for Vue.js.

Execute the following code to complete the project infrastructure (with WebPack configured, dependency package installation, base directory generation).

# Install vue-CLI globally

$ npm install --global vue-cli

Create a new project based on the WebPack template

$ vue init webpack my-project

Install dependencies and go with you

$ cd my-project

$ npm install

$ npm run dev
Copy the code

Main contents:

-dist // Static resources after the webPack pack.-node_modules // Dependence on NPM install package ├ ─ ─ SRC / / front main file │ ├ ─ ─ assets/resources/static │ │ ├ ─ ─ the font │ │ ├ ─ ─ img │ │ └ ─ ─ SCSS │ ├ ─ ─ the components / / a single component │ │ ├ ─ ─ │ ├── store // Global variables │ ├── app.vue // App component │ ├─ main.js Main entry file │ ─ static // Static file .babelrc // Babel configuration items.editorConfig // Editor configuration items..gitignore // Directory that will ignore the syntax check.index.html // Entry page.index.html.html Package. json // Description and dependencies of the projectCopy the code

Package. json file description: description and dependencies of the project

1. Scripts: the commands that compile the project

For example, run NPM run dev to run node build/dev-server.js in scripts.

2. Dependencies: Project dependencies

For example, run NPM install wx –save to install the dependent module Wx.

3. DevDependencies: Dependencies during project development

For example, run the NPM install sass –save-dev command to install the dependent module sass.

NPM Related instructions:

NPM is a node.js version management and dependency package management tool. It uses the Node environment to install the dependency packages required by front-end build projects.

The NPM installation and download speed is too slow. Use the Taobao image CNPM install to install quickly. Setting method:

$ npm install -g cnpm –registry=https://registry.npm.taobao.org

Project loading process:

1. The index. The HTML page

The current construction project is SPA (single page application), the index.html page is the entry page, and meta and other related pages are configured.

The page

mounts the main component.

2.main. js: the main entry file

Config -> entry: {app: ‘./ SRC /main.js’}

This file initializes the vue instance and imports the corresponding modules (be sure to configure and install them in package.json before importing), with main.js import and instructions:

​	import Vue from 'vue'   / / into the vue
​	
​	import App from './App'   // Introduce the main component app.vue
​	
​	import router from './router' // Import the route configuration file
​	
​	import axios from 'axios' // Import the network request tool Axios
Copy the code

App.vue: main component

The main component is mounted in the index.html entry page and introduced in the main.js main entry file.

After other components (e.g. / SRC /components/xxx.vue) are created, they can be rendered in the current main component with routing configuration.

4. Configure vue-router for the route

Routing configuration: Map components to routes and then tell vue-Router where to render them

npm install vue-router
Copy the code
import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

// 1. Define (routing) components: import (single-file components in the current application).
import Home from '.. /components/Home.vue'

// 2. Define the route, create the router instance, and transmit the 'routes' configuration
// Each route should map one component.
var router = {}

export default router = new Router({
  routes: [{path: '/'.name: 'home'.component: Home
    }
   ]
})

// 3. Create and mount the root instance in the main.js main entry file.
// Remember to configure router parameters to inject routes,
// So that the entire application has routing capability

new Vue({
  el: '#app',
  router,
  template: '<App/>'.components: { App }
})

// Now the application is started!
Copy the code

Next

The next section discusses the creation of network requests and components.

“To be Continued”

Coding01 looks forward to your continued attention

And thank you for seeing this