Vue Complete Project Build (Advanced)

Pre-condition:

Familiar with JavaScript + HTML5 + CSS3.
    Understanding the ES2015 Module module (Export, Import, Export-Default).
  1. Learn about NodeJS basic knowledge, NPM common commands, and NPM Script use (using npm in the Vue project for packet management).
  2. Understand the WebPack Packing Tool (Common Configuration Options and Loader Concept). (WebPack WebPack.github.IO) is a module packaging tool. It uses each file in a bunch of files as a module, finds their dependencies, package them as a deployable static resource. WebPack is also Need an NPM installation method).
  3. Starts installation:

Build a large single page application using Vue-CLI: Vue.js Scaffolding Tools. Execute the following code, you can complete the project base construction (the installation of the WebPack, the installation of the WebPack, dependent package) is configured.

# Global Install Vue-CLI $ NPM Install – Global Vue-CLI # Create a new project based on WebPack Template $ Vue Init Webpack My-Project # Installation Dependence, Take you $ cd my-project $ npm install $ npm run dev

Main catalog:
   
├── Basic configuration, development environment configuration, production environment configuration ├- Config // path, port, and reverse proxy configuration ├── Dist // Webpack packaged static resource ├─ ─ Node_Modules // NPM installation Dependent package ├── SRC // front end main file │ ├─ Assets / / Static Resource │ │ ├─Font │ │ ├── Img │ │ └── SCSS │ ─ Components // Single Components │ │ ├─XXX.VUE // Single File Components │ ├── Router // Routing configuration │ ├─- store // global variable │ ├─ app.Vue // APP components │ ├─ main.js primary entrance file ├─ static // static file ├─.babelrc // Babel configuration Item ├─.editorconfig // Editor’s configuration item ├─.gitignore // will ignore the directory of the syntax check ├─ ─ ─ ─ ─ ─ ─ ─ ─ ─ Package.json // Project Description and Dependency

Package.json file description: Description and dependence of the project

1. Spripts: Compile items
Example: Execution
 NPM Run DEV , that is, the corresponding  Node Build / dev-server.js 
in Scripts is performed. 2. Dependendencies: Dependent on the project

Example: Perform

npm install wx –save

, that is, the installation depends on the module Wx.

3. Devdependencies: Dependent on Project

Example: Execute npmInstall Sass – Save-dev , that is, the installation dependent module Sass.

Addition: NPM Related Description:

NPM is Node.js version management and dependent package management tool, and install the front-end build project by the Node environment.

NPM installation download speed is too slow, using Taobao mirror CNPM Install

Quick installation. Setting method:

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

1. Index.html page

Current build items are SPA (single page application ), The index.html page is the entry page, and the configuration of the META and other related pages.
   of this page is mounted. 
2. Main.js: primary entrance file
Note: Setting in

WebPack.Base.config -> Entry: {app: ‘. /src/main.js’ }

Vue完整项目构建(进阶篇) This file initializes the Vue instance and introduces the corresponding module (confirmed before introducing Package.json is configured), attached to main.js introduction and instructions :

Import Vue from ‘Vue’ // Introduces Vue Import App from ‘./app’ // Introduction Main Component App.Vue ImportRouter from ‘./router’ // Import Routing Profile Import Axios from ‘Axios’ // Introduction Network Request Tools AXIOS

3. app.Vue: main component

Mounts the primary component in the INDEX.html entry page and introduces the primary component in the Main.js primary entrance file.

After creating other components (case: /src/components/xxx.vue), you can render in the current main component via routing configuration.

4. Routing configuration Vue-router

Routing configuration: Map Components to Routes, then tell Vue-Router where to render them

NPM Install Vue-RouterImport Vue from ‘Vue’Import Router from’ Vue-Router’Vue.use (Router) / / Definition (Route) Component: Import (in the current application File components). Import home from ‘../components/home.vue’// 2. Define routing and create a Router instance, then pass the `routes` configuration // Each routing should map a component. Var router = {} export default router = new router ({routes: “{routes: ‘home’, component: home}]} // 3. Create a summation in main. Mounting root instance. / / Remember to inject route from the router configuration parameter, //, so that the entire application has routing work.Can new Vue ({el: ‘#app “, router, template:’

, component: {app} // is now started!

 Summary   
The above is the construct of the Vue complete project introduced to you, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment