npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互

13.8 npm(nodejs package manager)

使用命令行安装包:
1. cd切换到项目目录下，执行初始化操作 npm init/npm init -y
2. 安装其他依赖包
npm install jquery
npm install jquery@1.11.13
npm install jquery -g       全局安装
npm install bootstrap@3 -D  开发环境下
marked包安装和使用    npm install marked -D   
npm install vuex -D
3. 卸载包     npm uninstall 包名
4. 更新npm    npm install npm@latest 
5. npm安装包慢的解决办法：
    1.安装cnpm包 ：https://npm.taobao.org/
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    2. 配置npm源为阿里源
    npm config set registry https://registry.npm.taobao.org/

在当前项目下生成文件：node_moduels(包含用npm导入的jQuery包等)、package.json、pack-lock.json(包含导入包的信息)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        $.each([11,22,33], function(k,v){
            console.log(k,v)
        })
    </script>
</body>
</html>

13.9 webpack

为什么要有webpack？
1. JS中不存在模块化的概念
2. 安装和使用
npm install webpack -g          --> 全局安装
npm install webpack-cli -g
3. webpack进阶：https://webpack.js.org/

在当前项目下生成文件：dist(包含main.js,将项目下的依赖关系文件打包保存在main.js文件中)、node_moduels(包含用npm导入的jQuery包等)、package.json、pack-lock.json(包含导入包的信息)

x.js:

var alex = 'sb';
var login = true;
module.exports = {alex}

y.js:

var obj = require('./x')
var jquery = require('jquery')
console.log(obj);   //sb
jquery.each([11,22,33,44], function(k,v){
    console.log(k,v)
})

main.html:

<body>
<script src="./dist/main.js"></script>
</body>

13.10Vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
        <component-a></component-a>
        <ComponentB             //父组件向子组件通信
            v-for="a in aList"
            v-bind:url="a.url"
            v-bind:title="a.title"
        ></ComponentB>
       <p> 被选了{{num}}次！</p>     <!--子组件向父组件通信-->
        <ComponentC
            v-for="name in nameList"
            v-bind:name="name"
            v-on:do="foo"
        ></ComponentC>  
        <table>                 //组件的is属性
        <!-- <ComponentB></ComponentB> 此时组件中template中的tr会显示在table外-->  
        <tr is="ComponentB"></tr>  //此时组件中template中的tr会显示在table中的tbody中
        </table>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>  <!--通过npm导入vue.js-->
    <script>
        //全局注册组件：定义一个名为button-counter的新组件
        Vue.component('button-counter', {
        /* data: {
            count: 0
            } */
        data: function (){      //data 必须是一个函数,不能直接是对象，组件复用时会影响到其他实例
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">你点了我 {{ count }} 次。</button>'
        })
        //局部注册组件：局部注册的组件在其子组件中不可用，如果你希望ComponentB在ComponentA中可用，需声明
        const ComponentA = {
             components: {
                ComponentB
            },
            template: `<a href='https://www.sogo.com'>点我</a>`,
            data: function(){
                return {  
                }
            }
        }
        //父组件向子组件通信
        const ComponentB  = {
            //template: `<a> <slot></slot></a>`,通过插槽slot分发内容
            //template: ` <tr><slot></slot></tr>`,组件的is属性
            template: `<p><a v-bind:href='url'>{{title}}</a></p>`,
            props: {            //在子组件中使用props声明将url、title传入组件template并显示
                url: String,     //对传值进行校验
                title: {
                    type: String,
                    required: true
                }
            },
            data: function(){
                return {
                
                }
            }
        }
         //子组件向父组件通信
        const ComponentC = {
            //子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件
            template: `<button v-on:click='$emit("do")'>{{ name }}</button>`,
            props: {        //使用props声明将name传入组件template并显示
                name
            },
            methods: {
                do(){

                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components:{        //局部注册组件需要在components中声明
                'component-a': ComponentA,
                ComponentB,
                ComponentC
            },
             data: {
                num:0,
                nameList: ["技师A", '技师B', '技师C'],
                aList: [
                    {
                        url: 'https://www.sogo.com',
                        title: 'sogo'
                    },
                    {
                        url: 'https://www.luffycity.com',
                        title: 'luffycity'
                    },
                    {
                        url: 'http://www.oldboyedu.com/',
                        title: 'oldboy edu'
                    },
                ]
            },
            methods: {
                foo(){
                    this.num += 1;
                }
            } 
        })
    </script>
</body>
</html>

13.11Vue脚手架开发工具

1. 安装
npm install -g vue-cli
2. 使用
查看安装的vue-cli版本：vue -V
查看帮助：vue --help
查看支持的模板：vue list
3.创建Vue项目
webpack简单模板：vue init webpack-simple app01
webpack模板：(使用Bootstrap时候要用这个):vue init webpack vueapp01
    ? Project name vueapp01                     '回车确认'
    ? Project description A Vue.js project        '回车确认'
    ? Author Lmy <1592187014@qq.com>             '回车确认'
    ? Vue build (Use arrow keys)                
    ? Vue build (standalone)
        > Runtime + Compiler: recommended for most users    '回车确认'
        Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are              ONLY allowed in .vue files - render functions are required elsewhere
    ? Install vue-router? 'Yes'
    ? Use ESLint to lint your code? 'No'
    ? Set up unit tests No '(设置单元测试)'
    ? Setup e2e tests with Nightwatch?  'No'   '（用夜视器设置e2e测试?）'
    ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)    '（npm）'
        > Yes, use NPM    '回车确认'
        Yes, use Yarn
        No, I will handle that myself
    。。。。（ vue-cli · Generated "vueapp01".）。。。。（Installing project dependencies ...）。。。。 Project initialization finished!。。。。。。
'''To get started:
  cd vueapp01
  npm run dev'''
C:\untitled>cd vueapp01
C:\untitled\vueapp01>npm run dev '(启动前端服务)'' Your application is running here: http://localhost:8080'
停止项目：Ctrl + C 
4.在当前项目下安装bootstrap
C:\untitled\vueapp01>npm install bootstrap@3.3.7 -D  或者  npm install bootstrap@3.3.7 --save-d
'安装开发环境下的bootstrap，并将依赖关系写入package.json中'

13.12Vue Router的使用

两个组件（Vue Router内置组件）：

<router-link to="/foo">Go to Foo</router-link> #默认渲染成a标签
<router-view></router-view>                  #路由视图，组件显示位置

制作组件路由：

components/Home.vue

<template>
    <div>
        <h1>这是home页面</h1>   //vue文件中，组件template一定要用div包裹所有标签
    </div>
</template>

<script>
export default {
    name:'Home',
}
</script>

<style>

</style>

components/Note.vue

<template>
    <div>
        <h1>这是note页面</h1>
    </div>
</template>

<script>
export default {
    name:'Note',
}
</script>

<style>
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home.vue'  //从组件导入，@代表src
import Note from '@/components/Note.vue' 

Vue.use(Router)

export default new Router({
  mode:'history',                       //去掉URL中的'#'
  routes: [                             //设置组件路由对应关系
    {
      path: '/home',
      name: '我的home页面',     
      component: Home
    },
    {
      path: '/note',
      name: '我的note页面',
      component: Note
    }
  ]
})

Apple.vue：

<li><router-link to="/home">link home版</router-link></li>
<li><router-link to="/note">link note版</router-link></li>
<router-view></router-view>

或

<router-link
          to="/home" 
          tag="li"               #指定生成li标签
          active-class="active"   #指定标签被点击时的样式
        >
          <a href="">link home版</a>
        </router-link>
 <router-link
          to="/note" 
          tag="li"               
          active-class="active"   
        >
          <a href="">link note版</a>
        </router-link>
<router-view></router-view>

或

<router-link
    v-for="(item,index) in allRouters"
    v-bind:to="item.path"
    tag="li"
    active-class="active"    
    v-bind:key=index
        >
    <a href="">{{ item.name }}</a>
</router-link>
<router-view></router-view>  

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
export default {
  name: 'App',
  // 计算属性
  computed:{
    allRouters(){   // 当前Vue实例注册的所有路由
      return this.$router.options.routes
    }
  }
}
</script>

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'  //导入路由对象

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,           //注册路由对象
  components: { App },
  template: '<App/>'
})

13.13Vuex的使用

store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 开一家商店
export default new Vuex.Store({
    state: {
      count:0
    },
    mutations:{             //提交 mutation来更改 Vuex 的 store 中的状态
      increment(state){
        state.count+=1
      }
    }
  })

main.js:

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,   //注册路由对象
  store,    //向vue实例注册我的商店
  components: { App },
  template: '<App/>'
})

NoteItem.vue:

<template>
  <div
  class="list-group-item"
  v-on:click="foo"
  >
  {{n}}
  </div>
</template>

<script>
export default{
    name:'NoteItem',
    props:{
      n:String
    },
    methods:{                   //v-on监听事件使用method
      foo(){                  //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击
       // this.$emit('plus')   //使用子组件向父组件传值时使用$emit，使用vuex时注释此项
       //this.$store.state.count+=1      //使用vuex,在被点击时修改store中的count
       this.$store.commit('increment')  //使用vuex,在被点击时提交事件increme
    }
    }
  }
</script>

<style>
</style>

NoteList.vue:

<template>
    <div>
    <div class="list-group">
      <!-- #父组件向子组件传值，将循环数据使用v-bind传给子组件，子使用props接收并使用，后替换NoteItem -->
            <NoteItem
            v-for="(note,index) in noteList"
            v-bind:n='note'
            v-bind:key='index'
            v-on:plus='p'>  <!-- #子组件向父组件传值，使用v-on监听$emit传递的事件 -->
            </NoteItem>
            <p>计数器:{{count}}</p>
        </div>
     </div>
</template>

<script>
  import NoteItem from '@/components/NoteItem'
  export default {
    name:'NoteList',
    components:{
       NoteItem
     },
     data:function() {
       return {
         noteList: [
           '第一项','第二项','第三项'
         ],
         //count:0          //使用子组件向父组件传值时使用data，使用vuex时注释此项
       }
     },
     methods:{     //v-on监听事件使用method
       p(){
         //console.log(this.count);
         this.count+=1
     }
     },
     computed:{         //使用vuex时使用此项,要用return返回
       count:function() {
         return this.$store.state.count
       }
     }

}
</script>
<style>
</style>

Vue组件之间的通信:

　　父组件->子组件：子组件中要使用：props声明我接收的变量

　　子组件 -> 父组件：1.子组件通过this.$emit('事件名') 向父组件抛出事件

　　　　　　　　　　　2.父组件通过v-on:事件名='方法名' 监听子组件的事件从而触发一个修改数据的方法

13.14使用Django前后端交互

1.django做后端,(先导入pip3 install django-cors-headers)在Django的settings文件中配置：

#允许跨域请求的IP（因为vue默认8080端口，Django默认8000端口）
#授权白名单
CORS_ORIGIN_WHITELIST=(
    'http://localhost:8080',
    'http://127.0.0.1:8080'
)

views.py:

from app01 import models
from django.http import JsonResponse

def note_list(request):
    ret = {"code": 0}
    data = list(models.Note.objects.all().values("id", "title", "content", "markedcontent"))
    ret["data"] = data
    return JsonResponse(ret) #返回json字符串

2.vue作前端，使用axios发送请求并接受后端的数据（安装：npm install axios）

App.vue:

<script>
  import 'bootstrap/dist/css/bootstrap.min.css'
  export default {
    name: 'App',
    data: function () {
      return {}
    },
    // 计算属性
    computed: {
      // 当前Vue实例注册的所有路由
      allRouters() {
        return this.$router.options.routes
      }
    },
    beforeMount(){     //在挂载前执行store.js中的playNote函数接受后端数据
     this.$store.commit('playNote')
    },
  }
</script>

store.js:将接收到的数据放进商店

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'  //导入axios
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
      count:0,
      notelist:[]
    },
    mutations:{
    
      addnote_store(state,data){   //捕获NoteEdit传到store的数据用data接收
        state.notelist.push(data)
      },
      playNote(state,data){
        //在挂载DOM之前向后端获取数据
        axios.get('http://127.0.0.1:8000/api/notes/')  //访问note_list视图函数的路由
               .then(function (response) {          //response接收包含json字符串(ret)在内的数据
                   //console.log(response.data.data);
                   state.notelist=response.data.data  //后端返回到response中的数据(ret)以data命名
        })
               .catch(function (error) {              //获取后端数据失败打印错误信息
                  console.log(error);
        });
      }
    },
    actions:{
        
    //方法一：直接将新添加的数据使用 addnote_store添加到 notelist:[]
      addnode_post(context,data){    //异步操作store
     // 发送 POST 请求
       var data=qs.stringify(data) //发送json类型
       axios({
         method: 'post',
         url: 'http://127.0.0.1:8000/api/add/',
         data: data,
         })
         .then(function (response) {
           console.log('插入数据');
             console.log(response);
             context.commit('addnote_store',response.data.data)  // {id: 3, title: "第三条笔记", content: "", markdownContent: ""}
              //此处只让后端在数据库中添加数据，不添加到notelist:[]
           })
         .catch(function (error) {
             console.log(error);
           })
           },
    }
    })

NoteList.vue:取出商店里的数据，交给template进行渲染

<template>
        <div class="list-group">
            <NoteItem
            v-for="(note,index) in noteList"
            v-bind:n='note'
            v-bind:key='index'
            </NoteItem>
        </div>
</template>

<script>
  import NoteItem from '@/components/NoteItem'
  export default {
    name:'NoteList',
    components:{
       NoteItem
     },
     data:function() {
       }
     },
     computed:{         //使用vuex时使用此项
       count:function() {
         return this.$store.state.count
       },
       noteList:function(){    //使用vuex获得store的数据
         return this.$store.state.notelist
       }
     }
}
</script>