Vueの---プロジェクト作成

前Vueのプロジェクトを作成します。

ノードをインストールします。1.

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

cnpmをインストール2.

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

足場をインストールします。3.

cnpm install -g @vue/cli

キャッシュを空にします。4.

npm cache clean --force

Vueのプロジェクトの作成

最初：

1.新しいプロジェクトのVueを作成

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

2.入力したカスタムを使用した後

3.使用pycharmは、新しいプロジェクトを開きます

4.使用pycharmプロジェクトを開始

VUEプラグpycharm 5.インストール

第2

1. CMD

C:\Users\Wang Hongkun>vue ui

2.次のページでは、表示される作成するために、指示に従います

3.プロジェクトを開始するためにcmdを

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

プロジェクトをリビルド

1.プロジェクトの3つのファイルは新しいフォルダにコピーされ、公共、srcフォルダとpackage.jsonの設立に先立って、その後、新しい依存関係をダウンロードし、cmdを実行

>>> cnpm install

注意点：

1. Doが、デフォルトのダウンロードの依存関係を使用していません

2.Vueラベル構文サポートケース

プロジェクトの内容紹介

├── 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等配置文件

プロジェクトのライフサイクル

1.プロジェクトは、最初の環境に導入されたメインスクリプトmain.jsを、ロードルートルートを作成します

import 别名  from  资源

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

メインスクリプトファイルmain.js役割：

1.ロードVueの環境では、ルート・コンポーネントが完成し、レンダリングを持って作成

2.ロードし、既存のサードパーティ製システム環境：ルータ、店

3.ロードカスタムサードパーティの環境と自分自身の環境を構成し、ポストのプロジェクトが追加していきます

2.routerがロードされ、それは完全なルート、ルータindex.jsスクリプトファイルのフォルダを解析します - コンポーネント間のマッピングを

アセンブリ3.新規ビューVUE（フォルダビューで）、（index.jsルータの中に）配置されたが、ルートジャンプのルートで提供されます

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

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

Vueのファイルの種類のコンポーネント

Vueのは、3ルートタグを持つことになりますときに新しいファイルを作成します。

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

</template>

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

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

</style>

設定したカスタムグローバルスタイル

資産老舗静的ファイルフォルダでは、その後、main.jsをインポート

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

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

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

ロジックをルーティングジャンプ

ジャンプしない時にバインドイベントへのクリックイベントが、その後、トリガーをクリックし、あなたはを通して、いくつかのパラメータを設定する必要があります

ジャンプイベント処理メソッドをクリックします：

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

設定履歴バックと前進は、逆負に、前方に移動することです

this.$router.go(2)

ルーティングリダイレクト

在index.js中更改路由匹配

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

クリックされたパラメータが送信されます場合には

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

ライフサイクルフック

発生時：初期化インスタンスがすぐに呼ばれ、作成からライフサイクルの破壊までの時間

2ページ目にはいくつかの特性と、このジャンプの操作に応じて、最初のページであってもよいし、

特長：

1.多くの時間が作成から、ノードコールバックによって破壊コンポーネントアプローチ

2.フックのライフサイクルの役割が行われるように異なる時間ノードのニーズに応えるためにあります

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}