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

最新推荐文章于 2024-10-04 23:01:30 发布

背后——NULL

最新推荐文章于 2024-10-04 23:01:30 发布

阅读量756

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_41433183/article/details/88933162

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

node.js介绍

它是可以运行JavaScript的服务平台，可以吧它当做一门后端程序，只是它的开发语言是JavaScript
安装
http://nodejs.cn/
判断是否安装成功 node -v
进入编辑状态:node+回车，可以进行一些运算
退出编辑模式：ctrl+d或者ctrl+c两次
npm是一个包管理器，其实是一个命令。使用它来安装或者卸载包

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

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

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

简单使用

（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 文件名

在这里插入图片描述

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

	<!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)
          }
      })

  }
);

什么是webpack?

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

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

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

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

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

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

打包的方式：
手动打包：
```
 a.js
webpack a.js /test/a2.js
```
自动打包：

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>

在这里插入图片描述

二、启项目

流程
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
文件说明
import和require的区别

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

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

//异步
vue-resource:实现异步加载数据（已经弃用）
axios：实现异步加载数据
npm install axios --save-dev
npm install vue-axios --save-dev
VUE的生命周期

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

1.定义三个组件

2.在APP.VUE下导入组件

在component中声明，当键等于值时

当只渲染自己的页面时加的

组件内容
父子组件传值(父给子传值)

APP.vue(绑定对象)

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

APP.vue

Vfooter.vue
marked小插件
（1）先下载marked
（2）在main.js中导入marked

(3) 定义编辑和显示页面

（4）使用监听对编辑数据做marked处理

最终显示效果
vue-ruter的使用（路由定义）
（1）main.js导入 vue-router

让Vue使用我们的vue-router

（2）导入自己的插件页面路径

（3）定义路由对象，每一个路由要映射一个组件

使用我们定义的路由

最终页面显示效果