经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
npm(nodejs package manager)、webpack、Vue组件、Vue脚手架开发工具、Vue Router的使用、Vuex的使用、使用Django前后端交互small_white-
来源：cnblogs　　作者：small_white-　　时间：2020/11/9 16:01:54　　对本文有异议

13.8 npm(nodejs package manager)

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

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

index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  11.     <script>
  12.         $.each([11,22,33], function(k,v){
  13.             console.log(k,v)
  14.         })
  15.     </script>
  16. </body>
  17. </html>

13.9 webpack

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

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

x.js:

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

y.js:

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

main.html:

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

13.10Vue组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <button-counter></button-counter>
  10.         <button-counter></button-counter>
  11.         <button-counter></button-counter>
  12.         <component-a></component-a>
  13.         <ComponentB             //父组件向子组件通信
  14.             v-for="a in aList"
  15.             v-bind:url="a.url"
  16.             v-bind:title="a.title"
  17.         ></ComponentB>
  18.        <p> 被选了{{num}}次！</p>     <!--子组件向父组件通信-->
  19.         <ComponentC
  20.             v-for="name in nameList"
  21.             v-bind:name="name"
  22.             v-on:do="foo"
  23.         ></ComponentC>  
  24.         <table>                 //组件的is属性
  25.         <!-- <ComponentB></ComponentB> 此时组件中template中的tr会显示在table外-->  
  26.         <tr is="ComponentB"></tr>  //此时组件中template中的tr会显示在table中的tbody中
  27.         </table>
  28.     </div>
  29.     <script src="./node_modules/vue/dist/vue.js"></script>  <!--通过npm导入vue.js-->
  30.     <script>
  31.         //全局注册组件：定义一个名为button-counter的新组件
  32.         Vue.component('button-counter', {
  33.         /* data: {
  34.             count: 0
  35.             } */
  36.         data: function (){      //data 必须是一个函数,不能直接是对象，组件复用时会影响到其他实例
  37.             return {
  38.                 count: 0
  39.             }
  40.         },
  41.         template: '<button v-on:click="count++">你点了我 {{ count }} 次。</button>'
  42.         })
  43.         //局部注册组件：局部注册的组件在其子组件中不可用，如果你希望ComponentB在ComponentA中可用，需声明
  44.         const ComponentA = {
  45.              components: {
  46.                 ComponentB
  47.             },
  48.             template: `<a href='https://www.sogo.com'>点我</a>`,
  49.             data: function(){
  50.                 return {  
  51.                 }
  52.             }
  53.         }
  54.         //父组件向子组件通信
  55.         const ComponentB  = {
  56.             //template: `<a> <slot></slot></a>`,通过插槽slot分发内容
  57.             //template: ` <tr><slot></slot></tr>`,组件的is属性
  58.             template: `<p><a v-bind:href='url'>{{title}}</a></p>`,
  59.             props: {            //在子组件中使用props声明将url、title传入组件template并显示
  60.                 url: String,     //对传值进行校验
  61.                 title: {
  62.                     type: String,
  63.                     required: true
  64.                 }
  65.             },
  66.             data: function(){
  67.                 return {
  68.                 
  69.                 }
  70.             }
  71.         }
  72.          //子组件向父组件通信
  73.         const ComponentC = {
  74.             //子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件
  75.             template: `<button v-on:click='$emit("do")'>{{ name }}</button>`,
  76.             props: {        //使用props声明将name传入组件template并显示
  77.                 name
  78.             },
  79.             methods: {
  80.                 do(){
  81. ?
  82.                 }
  83.             }
  84.         }
  85.         var vm = new Vue({
  86.             el: '#app',
  87.             components:{        //局部注册组件需要在components中声明
  88.                 'component-a': ComponentA,
  89.                 ComponentB,
  90.                 ComponentC
  91.             },
  92.              data: {
  93.                 num:0,
  94.                 nameList: ["技师A", '技师B', '技师C'],
  95.                 aList: [
  96.                     {
  97.                         url: 'https://www.sogo.com',
  98.                         title: 'sogo'
  99.                     },
  100.                     {
  101.                         url: 'https://www.luffycity.com',
  102.                         title: 'luffycity'
  103.                     },
  104.                     {
  105.                         url: 'http://www.oldboyedu.com/',
  106.                         title: 'oldboy edu'
  107.                     },
  108.                 ]
  109.             },
  110.             methods: {
  111.                 foo(){
  112.                     this.num += 1;
  113.                 }
  114.             } 
  115.         })
  116.     </script>
  117. </body>
  118. </html>

13.11Vue脚手架开发工具

  1. 1. 安装
  2. npm install -g vue-cli
  3. 2. 使用
  4. 查看安装的vue-cli版本：vue -V
  5. 查看帮助：vue --help
  6. 查看支持的模板：vue list
  7. 3.创建Vue项目
  8. webpack简单模板：vue init webpack-simple app01
  9. webpack模板：(使用Bootstrap时候要用这个):vue init webpack vueapp01
  10.     ? Project name vueapp01                     '回车确认'
  11.     ? Project description A Vue.js project        '回车确认'
  12.     ? Author Lmy <1592187014@qq.com>             '回车确认'
  13.     ? Vue build (Use arrow keys)                
  14.     ? Vue build (standalone)
  15.         > Runtime + Compiler: recommended for most users    '回车确认'
  16.         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
  17.     ? Install vue-router? 'Yes'
  18.     ? Use ESLint to lint your code? 'No'
  19.     ? Set up unit tests No '(设置单元测试)'
  20.     ? Setup e2e tests with Nightwatch?  'No'   '（用夜视器设置e2e测试?）'
  21.     ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)    '（npm）'
  22.         > Yes, use NPM    '回车确认'
  23.         Yes, use Yarn
  24.         No, I will handle that myself
  25.     。。。。（ vue-cli · Generated "vueapp01".）。。。。（Installing project dependencies ...）。。。。 Project initialization finished!。。。。。。
  26. '''To get started:
  27.   cd vueapp01
  28.   npm run dev'''
  29. C:\untitled>cd vueapp01
  30. C:\untitled\vueapp01>npm run dev '(启动前端服务)'' Your application is running here: http://localhost:8080'
  31. 停止项目：Ctrl + C 
  32. 4.在当前项目下安装bootstrap
  33. C:\untitled\vueapp01>npm install bootstrap@3.3.7 -D  或者  npm install bootstrap@3.3.7 --save-d
  34. '安装开发环境下的bootstrap，并将依赖关系写入package.json中'

13.12Vue Router的使用

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

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

制作组件路由：

components/Home.vue

  1. <template>
  2.     <div>
  3.         <h1>这是home页面</h1>   //vue文件中，组件template一定要用div包裹所有标签
  4.     </div>
  5. </template>
  6. ?
  7. <script>
  8. export default {
  9.     name:'Home',
  10. }
  11. </script>
  12. ?
  13. <style>
  14. ?
  15. </style>
  16. ?

components/Note.vue

  1. <template>
  2.     <div>
  3.         <h1>这是note页面</h1>
  4.     </div>
  5. </template>
  6. ?
  7. <script>
  8. export default {
  9.     name:'Note',
  10. }
  11. </script>
  12. ?
  13. <style>
  14. </style>

router/index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Home from '@/components/Home.vue'  //从组件导入，@代表src
  5. import Note from '@/components/Note.vue' 
  6. ?
  7. Vue.use(Router)
  8. ?
  9. export default new Router({
  10.   mode:'history',                       //去掉URL中的'#'
  11.   routes: [                             //设置组件路由对应关系
  12.     {
  13.       path: '/home',
  14.       name: '我的home页面',     
  15.       component: Home
  16.     },
  17.     {
  18.       path: '/note',
  19.       name: '我的note页面',
  20.       component: Note
  21.     }
  22.   ]
  23. })

Apple.vue：

  1. <li><router-link to="/home">link home版</router-link></li>
  2. <li><router-link to="/note">link note版</router-link></li>
  3. <router-view></router-view>

或

  1. <router-link
  2.           to="/home" 
  3.           tag="li"               #指定生成li标签
  4.           active-class="active"   #指定标签被点击时的样式
  5.         >
  6.           <a href="">link home版</a>
  7.         </router-link>
  8.  <router-link
  9.           to="/note" 
  10.           tag="li"               
  11.           active-class="active"   
  12.         >
  13.           <a href="">link note版</a>
  14.         </router-link>
  15. <router-view></router-view>

或

  1. <router-link
  2.     v-for="(item,index) in allRouters"
  3.     v-bind:to="item.path"
  4.     tag="li"
  5.     active-class="active"    
  6.     v-bind:key=index
  7.         >
  8.     <a href="">{{ item.name }}</a>
  9. </router-link>
  10. <router-view></router-view>  
  11. ?
  12. <script>
  13. import 'bootstrap/dist/css/bootstrap.min.css'
  14. export default {
  15.   name: 'App',
  16.   // 计算属性
  17.   computed:{
  18.     allRouters(){   // 当前Vue实例注册的所有路由
  19.       return this.$router.options.routes
  20.     }
  21.   }
  22. }
  23. </script>

main.js:

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'  //导入路由对象
  4. ?
  5. Vue.config.productionTip = false
  6. ?
  7. /* eslint-disable no-new */
  8. new Vue({
  9.   el: '#app',
  10.   router,           //注册路由对象
  11.   components: { App },
  12.   template: '<App/>'
  13. })

13.13Vuex的使用

store.js:

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. ?
  4. Vue.use(Vuex)
  5. // 开一家商店
  6. export default new Vuex.Store({
  7.     state: {
  8.       count:0
  9.     },
  10.     mutations:{             //提交 mutation来更改 Vuex 的 store 中的状态
  11.       increment(state){
  12.         state.count+=1
  13.       }
  14.     }
  15.   })

main.js:

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import store from './store'
  5. ?
  6. Vue.config.productionTip = false
  7. ?
  8. /* eslint-disable no-new */
  9. new Vue({
  10.   el: '#app',
  11.   router,   //注册路由对象
  12.   store,    //向vue实例注册我的商店
  13.   components: { App },
  14.   template: '<App/>'
  15. })

NoteItem.vue:

  1. <template>
  2.   <div
  3.   class="list-group-item"
  4.   v-on:click="foo"
  5.   >
  6.   {{n}}
  7.   </div>
  8. </template>
  9. ?
  10. <script>
  11. export default{
  12.     name:'NoteItem',
  13.     props:{
  14.       n:String
  15.     },
  16.     methods:{                   //v-on监听事件使用method
  17.       foo(){                  //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击
  18.        // this.$emit('plus')   //使用子组件向父组件传值时使用$emit，使用vuex时注释此项
  19.        //this.$store.state.count+=1      //使用vuex,在被点击时修改store中的count
  20.        this.$store.commit('increment')  //使用vuex,在被点击时提交事件increme
  21.     }
  22.     }
  23.   }
  24. </script>
  25. ?
  26. <style>
  27. </style>

NoteList.vue:

  1. <template>
  2.     <div>
  3.     <div class="list-group">
  4.       <!-- #父组件向子组件传值，将循环数据使用v-bind传给子组件，子使用props接收并使用，后替换NoteItem -->
  5.             <NoteItem
  6.             v-for="(note,index) in noteList"
  7.             v-bind:n='note'
  8.             v-bind:key='index'
  9.             v-on:plus='p'>  <!-- #子组件向父组件传值，使用v-on监听$emit传递的事件 -->
  10.             </NoteItem>
  11.             <p>计数器:{{count}}</p>
  12.         </div>
  13.      </div>
  14. </template>
  15. ?
  16. <script>
  17.   import NoteItem from '@/components/NoteItem'
  18.   export default {
  19.     name:'NoteList',
  20.     components:{
  21.        NoteItem
  22.      },
  23.      data:function() {
  24.        return {
  25.          noteList: [
  26.            '第一项','第二项','第三项'
  27.          ],
  28.          //count:0          //使用子组件向父组件传值时使用data，使用vuex时注释此项
  29.        }
  30.      },
  31.      methods:{     //v-on监听事件使用method
  32.        p(){
  33.          //console.log(this.count);
  34.          this.count+=1
  35.      }
  36.      },
  37.      computed:{         //使用vuex时使用此项,要用return返回
  38.        count:function() {
  39.          return this.$store.state.count
  40.        }
  41.      }
  42. ?
  43. }
  44. </script>
  45. <style>
  46. </style>

Vue组件之间的通信:

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

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

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

13.14使用Django前后端交互

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

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

views.py:

  1. from app01 import models
  2. from django.http import JsonResponse
  3. ?
  4. def note_list(request):
  5.     ret = {"code": 0}
  6.     data = list(models.Note.objects.all().values("id", "title", "content", "markedcontent"))
  7.     ret["data"] = data
  8.     return JsonResponse(ret) #返回json字符串

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

App.vue:

  1. <script>
  2.   import 'bootstrap/dist/css/bootstrap.min.css'
  3.   export default {
  4.     name: 'App',
  5.     data: function () {
  6.       return {}
  7.     },
  8.     // 计算属性
  9.     computed: {
  10.       // 当前Vue实例注册的所有路由
  11.       allRouters() {
  12.         return this.$router.options.routes
  13.       }
  14.     },
  15.     beforeMount(){     //在挂载前执行store.js中的playNote函数接受后端数据
  16.      this.$store.commit('playNote')
  17.     },
  18.   }
  19. </script>

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

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import axios from 'axios'  //导入axios
  4. Vue.use(Vuex)
  5. ?
  6. export default new Vuex.Store({
  7.     state: {
  8.       count:0,
  9.       notelist:[]
  10.     },
  11.     mutations:{
  12.     
  13.       addnote_store(state,data){   //捕获NoteEdit传到store的数据用data接收
  14.         state.notelist.push(data)
  15.       },
  16.       playNote(state,data){
  17.         //在挂载DOM之前向后端获取数据
  18.         axios.get('http://127.0.0.1:8000/api/notes/')  //访问note_list视图函数的路由
  19.                .then(function (response) {          //response接收包含json字符串(ret)在内的数据
  20.                    //console.log(response.data.data);
  21.                    state.notelist=response.data.data  //后端返回到response中的数据(ret)以data命名
  22.         })
  23.                .catch(function (error) {              //获取后端数据失败打印错误信息
  24.                   console.log(error);
  25.         });
  26.       }
  27.     },
  28.     actions:{
  29.         
  30.     //方法一：直接将新添加的数据使用 addnote_store添加到 notelist:[]
  31.       addnode_post(context,data){    //异步操作store
  32.      // 发送 POST 请求
  33.        var data=qs.stringify(data) //发送json类型
  34.        axios({
  35.          method: 'post',
  36.          url: 'http://127.0.0.1:8000/api/add/',
  37.          data: data,
  38.          })
  39.          .then(function (response) {
  40.            console.log('插入数据');
  41.              console.log(response);
  42.              context.commit('addnote_store',response.data.data)  // {id: 3, title: "第三条笔记", content: "", markdownContent: ""}
  43.               //此处只让后端在数据库中添加数据，不添加到notelist:[]
  44.            })
  45.          .catch(function (error) {
  46.              console.log(error);
  47.            })
  48.            },
  49.     }
  50.     })

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

  1. <template>
  2.         <div class="list-group">
  3.             <NoteItem
  4.             v-for="(note,index) in noteList"
  5.             v-bind:n='note'
  6.             v-bind:key='index'
  7.             </NoteItem>
  8.         </div>
  9. </template>
  10. ?
  11. <script>
  12.   import NoteItem from '@/components/NoteItem'
  13.   export default {
  14.     name:'NoteList',
  15.     components:{
  16.        NoteItem
  17.      },
  18.      data:function() {
  19.        }
  20.      },
  21.      computed:{         //使用vuex时使用此项
  22.        count:function() {
  23.          return this.$store.state.count
  24.        },
  25.        noteList:function(){    //使用vuex获得store的数据
  26.          return this.$store.state.notelist
  27.        }
  28.      }
  29. }
  30. </script>

NoteItem.vue:

  1. <template>
  2.   <div
  3.   class="list-group-item"
  4.   v-on:click="foo"
  5.   >
  6.   {{n.title}}{{n.content}}
  7.   </div>
  8. </template>
  9. ?
  10. <script>
  11. export default{
  12.     name:'NoteItem',
  13.     props:{      //props指定接收父组件传递的数据
  14.       n:Object
  15.     },
  16.     methods:{                 //v-on监听事件使用method
  17.       foo(){                  //子组件被点击时向父组件传值 ，使用$emit()传递事件，告知父组件子组件被点击
  18.        // this.$emit('plus')   //使用子组件向父组件传值时使用$emit，使用vuex时注释此项
  19.        //this.$store.state.count+=1      //使用vuex,在被点击时修改store中的count
  20.        this.$store.commit('increment')   //使用vuex,在被点击时提交事件increme
  21.     }
  22.     }
  23.   }
  24. </script>

 

 

 

 

 

 

 

 

 

 

 

原文链接：http://www.cnblogs.com/mylu/p/13821238.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号