Vue --- project creation

Before Create a Vue project

1. Install node

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

2. Install cnpm

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

3. Install scaffolding

cnpm install -g @vue/cli

4. Empty the cache

npm cache clean --force

Creating Vue project

The first:

1. Create a new project Vue

# 切换到指定的文件夹下
>>> vue create 项目名   # 可以使用 -

2. After using a custom enter

3. Use pycharm open a new project

4. Use pycharm start the project

5. Installation in vue plug pycharm

The second

1. Open cmd

C:\Users\Wang Hongkun>vue ui

2. The following page will appear, follow the instructions to create

3. Use cmd to start the project

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

Rebuild the project

1. Project prior to the establishment of the public, src folder and package.json three files are copied to the new folder, and then download new dependency, cmd run

>>> cnpm install

important point:

1. Do not use the default download dependencies,

2.Vue label syntax support case

Project Contents Introduction

├── v-proj
|   ├── node_modules    // 当前项目所有依赖，一般不可以移植给其他电脑环境
|   ├── public          
|   |   ├── favicon.ico // 标签图标
|   |   └── index.html  // 当前项目唯一的页面
|   ├── src
|   |   ├── assets      // 静态资源img、css、js
|   |   ├── components  // 小组件
|   |   ├── views       // 页面组件
|   |   ├── App.vue     // 根组件
|   |   ├── main.js     // 全局脚本文件（项目的入口）
|   |   ├── router
|   |   |   └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|   |   └── store   
|   |   |   └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|   ├── README.md
└   └── package.json等配置文件

The project life cycle

1. Start the project, load the main script main.js, first introduced into the environment, create a root route

import 别名  from  资源

1.如果资源在node_modules中，可以直接写资源名
2.导入文件可以省略后缀，但是千万不能重名，最好是把后缀也写上
3. ./表示当前级，  ../表示上一级

The main script file main.js role:

1. Load Vue environment, create a root component has finished rendering

2. Load an existing third-party systems environment: router, store

3. Load custom third-party environment and configure their own environment, post projects continue to add

2.router is loaded, it will parse the router index.js script file folders, complete route - mapping between components

3. New View VUE assembly (in the views folder), arranged (in index.js router's), is provided in the route of route jumps

<router-view></router-view>   # 将所有的组件与路由的关系进行对应，起页面组件占位符的作用

# APP.vue中固定的写法
<template>
  <div id="app">
      <router-view></router-view>
    </div>
</template>

Vue file type component

Create a new file when the Vue will have three root tag

# template标签负责组件的html结构，有且只有一个根标签
<template>

</template>

# script标签负责组件的js逻辑，逻辑固定导出 expor default（组件内容）
<script>
    export default {
        name: "ceshi"
    }
</script>

# style标签负责组件的css样式，scoped保证样式的组件化，样式只在该组件内部起作用
<style scoped>

</style>

Configure custom global style

In assets established store static files folder, and then import the main.js

# 配置全局样式的导入方法：

1.import '@assets/css/global.css'  # @代表src文件夹的决对路径

2.require('@assets/css/global.css')   # 官方推荐使用这种

Jump routing logic

Bind a click event to the event, then click the trigger when not jump, you need to set some parameters through

Click on the jump event handling methods:

this.$router.push({ name: 'home' })

Set history back and forward, is to move forward, to reverse negative

this.$router.go(2)

Routing redirection

在index.js中更改路由匹配

{
    path:'/home',
    redirect:'/'   # 路由重定向
}

When the parameter when clicked will send the

console.log(this.$router);  // 控制路由路径

VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(0), resolveHooks: Array(0), …}
currentRoute: (...)
app: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
apps: [Vue]
options: {mode: "history", base: "/", routes: Array(5)}
beforeHooks: []
resolveHooks: []
afterHooks: []
matcher: {match: ƒ, addRoutes: ƒ}
fallback: false
mode: "history"
history: HTML5History {router: VueRouter, base: "", current: {…}, pending: null, ready: true, …}
__proto__: Object

console.log(this.$route)    // 控制路由数据

{name: "home", meta: {…}, path: "/", hash: "", query: {…}, …}
name: "home"
meta: {}
path: "/"
hash: ""
query: {}
params: {}
fullPath: "/"
matched: [{…}]
__proto__: Object

Lifecycle hook

Time of occurrence: When initializing instance is called immediately, a time from creation to destruction of the life cycle

May be the first page in accordance with this jump operations between some characteristic to a second page,

Features:

1. a component approach many times destroyed by node callback from creation to

2. The role of the life cycle of the hook is to meet at a different time node needs to be done

3.这些方法都是vue组件实例的成员

使用方法：

script >>> export default{    } >>> 在大括号内直接进行定义，也是一个实例

export default {
        # 生命周期钩子
        beforeCreate() {
            console.log('Home组件要创建了');
            console.log(this.back_data);
        },
        created() { // 重要方法：在该钩子中完成后台数据的请求
            console.log('Home组件创建成功了');
            console.log(this.back_data);
        },
        beforeMount() {
            console.log('Home组件准备加载')
        },
        mounted() {  // 特别耗时的数据请求，可以延后到组件初步加载成功后，再慢慢请求
            console.log('Home组件加载完成')
        },
        destroyed() {
            console.log('Home组件销毁成功了')
        }
    }

常用的生命周期钩子

# 组件要创建了
beforeCreate() {},

# 组件创建成功  重要方法：在该钩子中完成后台数据的请求
created() {},

# 组件准备加载
beforeMount() {},

# 组件加载完成  特别耗时的数据请求，可以延后到组件初步加载成功后，再慢慢请求
mounted() {},

# 组件销毁成功
destroyed() {}

路由传参的两种方式

1.前台加载静态资源中的图片采用require

img: require('@/assets/img/002.jpg')

2.通过路由传参的方式有两种，

第一种：

先定义好每个数据的pk，然后通过发送过来的数据通过 this.$router.push() 进行接收

1.<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>
    
2. goDetail(pk) {this.$router.push({
                    name: 'course-detail',
                    query: {pk: pk}
                });  
# this.$router.push(`/course/detail?pk=${pk}`); 可以获取到发送过来的数据
                 
# 路由中的配置
{path: '/course/detail',
name: 'course-detail',
component: CourseDetail}

第二种：

<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>
    
在路由中在进行配置
{path: '/course/:pk/detail',
name: 'course-detail',
component: CourseDetail}