npm_babel_前端模块化_webpack_vue路由_axios

最新推荐文章于 2024-05-16 10:30:30 发布

sensenyo

最新推荐文章于 2024-05-16 10:30:30 发布

阅读量246

点赞数 1

分类专栏： java每日总结文章标签： webpack 前端 npm

本文链接：https://blog.csdn.net/weixin_46659749/article/details/125491251

版权

java每日总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一 npm

1.概念
	a.npm相当于Java里面的maven，maven是用来管理jar包的，npm用来管理js 	
	b.maven用pom.xml管理依赖，npm利用package.json来管理 
c.如果使用npm，js依赖来自于网上下载 
d.安装好了node.js,就相当于安装好了npm   用nom -v 查看版本号
2.使用
	a.初始化环境
		创建一个空的文件夹
		npm init 
		npm init -y
	b.修改npm镜像
		npm config set registry https://registry.npm.taobao.org 
		npm config list
	c.下载并使用js包
		npm install jquery			从官网下载最新的版本
		npm install jquery@3.5.1	指定版本号
3.作用
	a.下载js依赖
	b.下载组件

二 babel

1.概念
		Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码
		ES6缺点:浏览器对其兼容性不太好，ES5兼容性可以
2.工具安装
		安装命令行转码工具
		npm install --global babel-cli
3.具体使用
		a.创建一个空的文件夹
		b.初始化环境 babel init -y 或 babel init
		c.创建一个es6语法 js文件
		d.配置.babelrc (创建一个)
			{
				"presets": ["es2015"],
				"plugins": []
			}
		f.安装转码器
			npm install --save-dev babel-preset-es2015
		g.执行转换
			babel es6/001.js -o es5/001.js (-o 是 单个文件 -d是文件夹)

三模块化(重要)

1.为什么要采用模块化
	a.软件危机存在
		当时开发模式跟不上社会发展
	b.模块化的理解
		前端开发也采用分层的理念 也模拟出controller,service,dao层
		js之间的相互调用 解决复杂代码之间的一个相互调用关系
2.概念 
	一个js文件调用另一个js
3.es5的方式

//a.编写一个01.js
const add = function (a,b) {
  return parseInt(a)+parseInt(b)
}

const jian = function (a,b) {
  return parseInt(a)-parseInt(b)
}

module.exports = {
  add,
  jian
}

//b.编写一个02.js
const opt = require("./01.js")

var jian = opt.jian(2,3);
var add = opt.add(2,3);

console.log(jian,add)
//c.调用方式  02.js调用01.js (node 02.js)

4.es6的方式一(掌握)

//a.编写一个login.js
export function login(){
	console.log("login")
}
export function register(){
	console.log("register")
}

//b.编写一个main.js
import {login,register} from "./login.js"
login()
register()
//c.调用方式 main.js调用login.js 
node main.js
//d.出现的问题
//SyntaxError: Unexpected token 
转换es6 至 es5
//babel es6v1.0 -d es5

5.4.es6的方式二(重点)

//a.编写一个login.js
export default{
	login(){
	console.log("login")
	},
	register(){
	console.log("register")
	}
}
//b.编写一个main.js
import login from "./login.js"
//c.调用方式
login.login()
login.register()
//main.js调用login.js cmd 中
node main.js
//d.出现的问题
//SyntaxError: Unexpected identifier 
转换es6 至 es5
//babel es6v2.0 -d es5

四 webpack(掌握)

1.概念
	一个前端资源加载/打包工具，把多个js,css图片等资源打包成一个文件
	减少网络请求次数
2.安装
	npm install -g webpack webpack-cli
3.利用webpack打包js
	a.创建一个新的文件夹webpack
		对其进行初始化 npm init -y 
	b.创建一个resources 里面创建3个js文件,让第三个文件导入前两个文件
	c.创建配置文件webpack.config.js
//Node.js内置模块,固定写法
const path = require("path");
module.exports = {
    //配置程序入口文件
    entry: './03.js',
    output: {
        //输出路径，__dirname：输出文件所在路径
        path: path.resolve(__dirname, './destination'),
        filename: 'merge.js' //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

	d.实现打包
		webpack 		打包的时候采用生产环境
		webpack --mode development
4.利用webpack打包css
	a.安装	
		安装style-loader和 css-loader
		npm install --save-dev style-loader css-loader 
	b.修改webpack.config.js
	c.在resources文件夹创建style.css
	d.修改part03.js 引入css样式

五 vue路由的概念(重要)

1.概念 
	前端路由概念
		由一个页面跳转到另一个页面 相当于a标签(坑位)
2.编写步骤

		<!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, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="appUI">
	a.在页面定义路由跳转的路径
    <p>
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 页面的坑位 -->
    <router-view></router-view>
</div>

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

<script>
	
    //编写页面跳转
    b.编写跳转页面
    const Welcome = {template: '<div>欢迎光临</div>'}
    const Student = {template: '<div>student list</div>'}
    const Teacher = {template: '<div>teacher list</div>'}
    //编写页面与路由映射关系
    c.编写页面与路由映射关系
    const routerUI = [
        {path: "/", component: Welcome},
        {path: "/student", component: Student},
        {path: "/teacher", component: Teacher}
    ]
    d.把映射关系放到router中
    //把映射关系放到router中
    const vueRouter = new VueRouter({
        routes: routerUI
    })
    //把router放到vue对象中
    e.把router放到vue对象中
    new Vue({
        el: "#appUI",
        router: vueRouter
    })
</script>
</body>
</html>

六 axios(重要)

1.概念 
axios用来发起异步请求，在使用过程中它的this同vue对象的this是同一个
a.创建一个页面
<!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, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="appUI">
    <p v-for="user in users">
        {{user.name}}---{{user.age}}
    </p>
</div>


<script src="axios.min.js"></script>
<script src="vue.min.js"></script>
<script>
    let appUI1 = new Vue({
        el: "#appUI",
        data: {
            users: []
        },
        methods: {
            getUserList() {
                axios({
                    url:"./data.json",
                    method:"get"
                }).then(data => {
                    console.log(data)
                    this.users = data.data.users
                })
            }
        },
        created() {
            this.getUserList();
        }
    })
</script>
</body>

</html>