欢迎光临
我的个人博客网站

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:untitledvueapp01>npm run dev '(启动前端服务)'' Your application is running here: http://localhost:8080' 停止项目:Ctrl + C  4.在当前项目下安装bootstrap C:untitledvueapp01>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>

NoteItem.vue:

<template>   <div   class="list-group-item"   v-on:click="foo"   >   {{n.title}}{{n.content}}   </div> </template><script> export default{     name:'NoteItem',     props:{      //props指定接收父组件传递的数据       n:Object     },     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>

 

 

 

 

 

 

 

 

 

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏