Vue web framework progressive Framework - Introduction to installation (python3 entry)

1 vue: js progressive frame 
2 advantages: single page, lightweight, data-driven, two-way data binding, the DOM virtual, component-based development (taking page code) 
. 3 VUE instance members: EL (mount point), Data (data), methods (method) 
. 4 VUE instructions: v-text (plain text instructions), v-html (can parse tag), v-once (interpolation expression to render text), {} (interpolation expression) , v-on (incident command), v-bind (property command), v-model (form command), v-IF, the else-IF-v, v-Show 
    @ ON-equivalent v: 
    : equivalent v- bind:

 

Django
 front and back do not separate project
    1 background rendering Page
    2 csrf-token => form post request
    3 the render, HTTPResponse, redirect => jsonResponse
    4 ajax => partial page refresh

Taiwan before and after separation project
    1 the front page of their own rendering - to build their own server running
    2 ajax complete data request
    3 drf (django frame) - django rest framework - restful (protocol Interface specification)
    . 4 VUE (JS frames) - the data driver

learning curve
    . 1 VUE
    2 DRF
    . 3 Luffy

 

Vue framework of
 what is vue: progressive, javascript framework

foreground three main frameworks:
    VUE (lightweight) - especially in the rain River
    Angular - facebook
    React - GitHub

advanced front-end design pattern:
    MVVM - than MVC divided into two parts, better than MVC
    completely away from the server side, a component of development. (+ Style + function page)

advantages vue of
    a single page, low hardware requirements
    2 Exploitation assembly
    3 data driver
    4 two-way data binding
    5 Virtual the DOM
    . 6 Lightweight

 

A, VUE environment to deploy

1 Installation node http://nodejs.cn/download/ NEXT NEXT 

2 installation cnpm (npm due in a foreign country, so we replaced the domestic cnmp source, avoid downloading the installation error) npm install -g cnpm --registry sudo = https://registry.npm.taobao.org if not error on the installation was successful 

3 installation vue scaffolding CNPM install -g @ vue sudo / cli 

npm cache Clean 4 empty the cache processing step 3 if the installation fails, run - force, and then re-run the command in step 3

vue deployment environment

 

Two, VUE project creation

    - Manually SELECT Feature 
    - The Features needed for the Check your Project 
        . 1 Babel into the transfer syntax grammar es6 es5, allowing to better identify the browser 
        2 Router distal routing 
        data between 3 Vuex warehouse, assembly component interaction 
        . 4 Linter / the Formatter   
        
    - ? Use history mode for router 
        due vue page only one page, in order to retreat forward, form history (window history), so here choose the Y- 
    - Pick a Linter / Formatter config 
        Basic 
    - Pick Additional lint the Feature 
        Line ON the Save 
    - the wHERE do you Placing Babel config for the prefer, CSS etc? 
        in decicated config Files 
    - the Save the this AS A PRESET for the Projects Future? 
        N 
    
    - CNPM serve RUN

1. vue create [Custom vue project name]

    - If you have not migrated to a project vue environment you need to be in addition to node_modules this folder all have to copy the new folder, 
        and then execute install reconstruction dependence cnpm

2. Migration reconstruction project

    - Edit the Configuration 
    - Fill in Name (custom) 
    - packageJson :( choose to package.json vue projects need to open the path of) 
    - the Command: (RUN) 
    - Script: (serve) 
    - node to node select Interpreter :( environment) 
    - package manager :( choose to npm environment) 
    
    - open pycharm the setting- Plugins- install vue.js search vue- 
    - restart pycharm 
    - complete!

3. vue project opens in the pycharm

 

Three, vue catalog description

- node_modules: Project Dependency 
- 
- public: public file 
    favicon.ico: page tab icon 
    index: the only page of the project 

- src: file directory project development 
    assets: static resource 
       CSS | img 
    Components: Widgets (* .vue) 
    views: View components (* .vue) 
    app.vue: root component 
    main.js: main script file 
    router.js: routing script file - VUE-Router 
    store.js: warehouse script file - vuex 

- * .xml | json | JS: series profile 
- README.md: instructions

View Code

    import Vue from 'vue' // depend directly under node_modules write the name of the 
    import App from './App.vue' // ./ represents the relative path to the current directory, the file extension can be omitted 
    import router from './router' @ represents the absolute path src directory 
    import store from './store' 
    information // configured in the main is to give the entire project configuration 
    // configured vue | root component App | routing | warehouse 
    after // also can be equipped with Cookie | Ajax (Axios) | Element-UI 
    
    
    
    // tips tips 
    Vue.config.productionTip to false = 
    
    new new Vue ({ 
      Router, 
      Store, 
      the render: H => H (the App) 
      // The following two sets of results are positive Solutions 
      // render: = readTemplateFn> readTemplateFn (the App) 
      // native follows: 
      // the render: function (Fn) { 
      // return Fn (the App) 
      //}
    }).$mount('#app')   //$mount = el:'#App'

main.js Profile