|
一 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的方式
const add = function (a,b) {
return parseInt(a)+parseInt(b)
}
const jian = function (a,b) {
return parseInt(a)-parseInt(b)
}
module.exports = {
add,
jian
}
const opt = require("./01.js")
var jian = opt.jian(2,3);
var add = opt.add(2,3);
console.log(jian,add)
4.es6的方式一(掌握)
export function login(){
console.log("login")
}
export function register(){
console.log("register")
}
import {login,register} from "./login.js"
login()
register()
node main.js
转换es6 至 es5
5.4.es6的方式二(重点)
export default{
login(){
console.log("login")
},
register(){
console.log("register")
}
}
import login from "./login.js"
login.login()
login.register()
node main.js
转换es6 至 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
const path = require("path");
module.exports = {
entry: './03.js',
output: {
path: path.resolve(__dirname, './destination'),
filename: 'merge.js'
},
module: {
rules: [
{
test: /\.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中
const vueRouter = new VueRouter({
routes: routerUI
})
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>
利用模拟数据的网站
https://mock.mengxuegu.com/
https://mock.mengxuegu.com/mock/62b94b60c99b3c42abbc2479/java/getUserList
|