A, Vue-CLI

(A) environment to build

Installation node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

In other source installation cnpm

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

Installation vue project scaffolding
```
cnpm install -g @vue/cli
```

Empty the cache processing

npm cache clean --force  # 第2、3步安装失败时，可以清空npm缓存，再重复执行失败的步骤

Creating (b) project

Create a project

# 1. 命令行式创建,自定义方式创建项目（选取Babel、Router、Vuex插件）
vue create 项目名

# 2. 命令行键入图形化界面创建
vue ui

Command line Start / Stop Project

npm run serve / cltr+c  # 要提前进入项目根目录

Packaging Project

npm run build  # 要在项目根目录下进行打包操作

Download dependent files

cnpm install # 当项目移植到其他电脑时,node_moodules需要重新构建,需要通过该指令根据package.json文件下载依赖文件,

(C) the project directory structure

v-proj project
1. node_moodules: current project all dependent files, can not be ported to other computers. To reconfigure
2. public
  1. favicon.ico: page tab icon
  2. index.html: The current html page project
3. src
  1. assets: static resource img, css, js
  2. components: Widgets
  3. views: page components
  4. App.vue: root component
  5. main.js: global script file (entry projects)
  6. router
    - index: (mapping between configuration and routing connection url page component) routing script file
  7. store
    - index.js: Warehouse script file (vuex plug-in configuration files, data warehouse)
4. package.json: storage project dependencies list json file
5. readme.md

Port Profile: vue.config.js

// 修改端口，没有可以自己新建，选做
module.exports={
    devServer:{
        port:8888 // 端口号
  }
}

(D) Vue assembly (.vue file)

template: There is one and only one root tag
export default {}: Export component object in the script tag
scopedProperties: style attribute scoped tag added, only work on behalf of the style (style of components) within the component
router-view Tags: App.vue root component present in the file, the placeholder page component

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name:"Test"
    }
</script>

<style scoped>
    
</style>

(E) global script file main.js (Project entrance)

import 别名 form '资源'
required: official advocates the use of static files required to load
@: Absolute path represents src folder
.$mount('app'): Mount, and mount the equivalent el members
render: Vue when instance is created, the system automatically triggers render rendering function, the function parameter is a function, the function call parameter passing parameters through App render rendering function, so as to render into a DOM component App root node, parameter represents createElement

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false  // 定义用户引导功能的开启，需要先定义

// 配置全局样式：@就代表src文件夹的绝对路径，官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css')

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

rewrite

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

(Vi) Vue request lifecycle

Browser user requests
router plug-in mapping User.vue page views in assembly
User.vue page components rendering widget (sub-assemblies) good components folder
Then replacing App.vue (root component) in the assembly User.vue <router-view />placeholder

Second, the page jumps and mass participation

(A) jump page

(1) tag jump

router-link Tags: jump completed routing tag corresponds to a label
to Parameters: Pointer to jump routes

<!-- 该标签完成路由跳转 -->
<router-link to="路由"></router-link>

(2) Logical Jump

$router.push('路由'): To $routerappend a route, the route to complete the jump
$router.go(NUM): History-based complete forward and backward jump, NUM is an integer forward, NUM is negative for the Back

(B) routing configuration and parameter passing

(1) no route configuration parameters

Normal configuration

// router/index.js路由配置文件中
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
];

Redirection Configuration

// router/index.js路由配置文件中
const routes = [
  {
    path: '/home',
    redirect:"/"
  },
];

(2) routing configuration parameters have

Spliced query parameters

// 1.页面跳转
// (1) 标签跳转(router-link标签中)
to="/user?pk=1"

// (2) 逻辑跳转
this.$router.push('/user?pk=1')

// 2. 路由配置
path:'/user'

// 3.取值方式
this.$router.query.pk

Packet type known parameters params

// 1. 页面跳转
// (1) 标签跳转(router-link标签中)
to='/user/1'

// (2) 逻辑跳转
this.$router.push('/user/1')

// 2. 路由配置
path:'/user/:pk'

// 3. 取值方式
this.$router.params.pk

Third, the life cycle of the hook

(A) concept

Assembly method to create a time node will trigger the destruction of
These methods are members of the component instance vue

(B) Method

Before creating the trigger assembly: beforeCreate () {}
created () {}: This component creates successfully triggered, then accept the background data, can operate on the data in this process, an important method
beforeMount () {}: prior to the loading completion trigger assembly
mounted () {}: the loading completion trigger assembly, extremely time consuming data requests, an important method
destroyed () {}: successfully destroyed when the trigger assembly

Four, JS prototype

(A) Prototype (object attribute)

Constructors: popular words, that function is the function declaration A
Prototype object: After declaring a function, the browser will automatically create an object in accordance with certain rules, the object is called a prototype object. The prototype object is actually stored in a memory of them, the prototype object has a property constructor , this attribute points to this constructor
After declaring a function, the constructor (declared function) there will be a property of the prototype , this property is the point corresponding to the prototype object constructor

(Ii) the prototype chain

A1 is connected between the prototype object instance of the object, called the prototype chain
JS when creating objects a1, there is a called a _proto_built-in property, used to point to create its prototype object prototype function object

(C) code for

A constructor has the prototype property, and a1 A constructor is to create objects out of his prototype property does not exist
A1 but has a __proto__property, stu call this property can directly access to the prototype object constructor A
Then accessed through the prototype object to the constructor constructor A, so that access to the prototype property

corresponds to the class prototype adds a property, this class is instantiated by the object out of the access to the property
And so on, may also be added in this example Vue Vue-CLI in property to the global method Axios, Axios to add widget

function A() {}

let a1 = new A();
let a2 = new A();

// 为A类添加原型 => 类似于类属性
A.prototype.num = 100;
console.log(a1.num); // 100

// ES6语法下类
class B {
    constructor(name) {
        this.name = name;
    }
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);


// 推导
Vue.prototype.$ajax = axios;

(Day68) Vue-CLI project, page jump and mass participation, the life cycle of the hook