python笔记(Vue组件 node和webpack介绍,简单项目)

VUE开源项目库
一、前期介绍

  1. node.js介绍

    它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript

  2. 安装
    http://nodejs.cn/
    判断是否安装成功 node -v
    进入编辑状态:node+回车,可以进行一些运算
    退出编辑模式:ctrl+d或者ctrl+c两次

  3. npm是一个包管理器,其实是一个命令。使用它来安装或者卸载包

    首先进行项目初始化:npm init (快速初始化:npm init -y),会生成文件:package.json

    npm install 包的名字 --save-dev
    npm install express --save-dev:吧依赖包增加到开发环境下

    npm install express
    npm install express --save :把依赖包增加到运行环境下

  4. 简单使用

    (1)模板化开发:
    stu.js

    var man="海燕";
    module.exports = man;  //对外开放接口
    console.log(man);
    

    stu2.js

    var temps = require("./stu.js");  //引用文件,在js文件中加个./代表是同级目录
    console.log(temps);
    那么如何执行文件呢?  node b.js =====》node 文件名
    

    在这里插入图片描述

  5. 用node.js简单的做一个登录

    login.html

    	<!DOCTYPE html>
    	<html lang="en">
    	<head>
    	    <meta charset="UTF-8">
    	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	    <meta name="viewport" content="width=device-width">
    	    <title>Title</title>
    	    <script src="jquery.js"></script>
    	    <style>
    	        span{
    	            color: red;
    	        }
    	    </style>
    	</head>
    	<body>
    	<div>
    	    <form action="" method="post">
    	        <p>用户名:<input type="text" placeholder="username" id="username"></p>
    	        <p>密码:<input type="password" placeholder="password" id="password"></p>
    	        <input type="submit" value="提交" onclick="login()">
    	        <span></span>
    	    </form>
    	</div>
    	<script>
    	    function login() {
    	        var username = $("#username").val();
    	        var password = $("#password").val();
    	        var url = "http://localhost:8080/login";
    	        console.log(username,password);
    	        $.post(url, {username,password}, function (response) {
    	            console.log(response);
    	            if (response){
    	                $("span").html("登陆成功")
    	            }else{
    	                $("span").html("登录失败")
    	            }
    	
    	        })
    	
    	    }
    	
    	</script>
    	</body>
    	</html>
    

    server.js

    var express = require("express"); //引用包
    var query = require("querystring");
    
    var app = express();  //初始化
    app.listen("8080",function () {  //监听
        console.log("服务已经启动,端口是8080")
    });
    
    var data2="";
    app.post(
      '/login',
      function (request,response) {
          response.header("Access-Control-Allow-Origin", "*");
          request.on("data",function (datas) {   //接收用户发来的数据,里面的data是不变的,就得叫data
              data2 = "";
              // console.log(datas)  ; //<Buffer 75 73 65 72 6e 61 6d 65 3d 26 70 61 73 73 77 6f 72 64 3d
                                    // >这样打印的结果是Buffer 类型的,所以我们得拼接一下,用querystring这个模块转成字符串
              data2+=datas;
          });
          request.on("end",function () {  //接收用户发来的数据之后开始解析
              console.log(query.parse(data2));  //{ username: '海燕', password: '123' }
              var username = query.parse(data2).username;
              var password = query.parse(data2).password;
              if (username == "海燕" && password == "123"){
                  response.send(true)//如果登录成功就把数据返回给前端
              }else{
                  response.send(false)
              }
          })
    
      }
    );
    
  6. 什么是webpack?

    webpack是一个模块打包工具。
    用vue项目来举例:浏览器它是只认识js,不认识vue的。而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html、js、css甚至是图片资源;并且由于组件化,这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别,我们就要使用webpack将它们打包成js文件以及相应的资源文件。

  7. webpack的功能?

    1、它可以吧CSS,JS图片当做模块来处理

    2、它可以吧以上的这些文件进行打包压缩成一个JS文件,减少了HTTP的请求

    3、根据模块之间的依赖关系进行分析,按需加载

    4、可以安装一些插件,对插件进行打包处理

  8. webpack安装

    npm install webpack -g(全局的安装)
    webpack -v #查看是否安装成功

    打包的方式:
    手动打包:

     a.js
    webpack a.js /test/a2.js
    

    自动打包:

  9. webpack 简单使用

    webpack是如何打包的

    app/a.js

    var tcl = "this is webpack test";
    console.log(tcl);
    require('style-loader!css-loader!./a.css');
    

    执行命令

    webpack app/a.js public/b.js    、//意思是吧app下的a.js打包在public下的b.js
    

    在这里插入图片描述
    就会自动生成一个b.js的文件,现在就可以使用并导入了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            this is div test
        </div>
        <script src="bundle.js"></script>
    </body>
    </html>
    

在这里插入图片描述

二、启项目

  1. 流程
    npm install vue-cli -g #-g全局
    (sudo)npm install vue-cli -g #mac笔记本
    1.vue init webpack-simple(j简单官方模板)
    2.npm install(下载依赖包)
    3.npm run dev

  2. 文件说明

    在这里插入图片描述

  3. import和require的区别

    import一定要放在文件顶部,他相当于一个指针引用了文件,并没有吧文件包含进来,需要调用文件时才引入
    require可以吧文件放在任何位置,他是吧文件直接包含进来

  4. 设置文件路径的流程

    1)建立组件(.vue的文件)
    2)配置路由(index.js文件中配置)
    3<router-link></router-link>
    4)<router-view></router-view>
    5)import 包名 from “组件路径”
    6)comonents进行注册

  5. 实现异步加载

    //异步
    vue-resource:实现异步加载数据(已经弃用)
    axios:实现异步加载数据
    npm install axios --save-dev
    npm install vue-axios --save-dev

  6. VUE的生命周期

    1、定义vue对象并实例化
    2、执行created函数
    3、编译模板,只会编译template的模板
    4、吧HTML元素渲染到页面当中
    5、执行mounted函数,(加载)相当于onload
    6、如果有元素的更新,就执行update函数
    7、销毁实例

  7. 创建组件

    1.定义三个组件
    在这里插入图片描述
    2.在APP.VUE下导入组件
    在这里插入图片描述
    在这里插入图片描述
    在component中声明,当键等于值时
    在这里插入图片描述
    当只渲染自己的页面时加的
    在这里插入图片描述
    组件内容
    在这里插入图片描述

  8. 父子组件传值(父给子传值)

    APP.vue(绑定对象)
    在这里插入图片描述
    Vheader.vue
    在这里插入图片描述

  9. 子调用父的方法并且给父传值

    APP.vue
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    Vfooter.vue

    在这里插入图片描述

  10. marked小插件
    (1)先下载marked
    (2)在main.js中导入marked
    在这里插入图片描述
    (3) 定义编辑和显示页面
    在这里插入图片描述
    在这里插入图片描述
    (4)使用监听对编辑数据做marked处理
    在这里插入图片描述
    最终显示效果
    在这里插入图片描述

  11. vue-ruter的使用(路由定义)
    (1)main.js导入 vue-router

    在这里插入图片描述
    让Vue使用我们的vue-router
    在这里插入图片描述
    (2)导入自己的插件页面路径
    在这里插入图片描述
    (3)定义路由对象,每一个路由要映射一个组件

    在这里插入图片描述

    使用我们定义的路由
    在这里插入图片描述
    最终页面显示效果

    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值