谷粒学院第四天
Posted 纵有疾风 起
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷粒学院第四天相关的知识，希望对你有一定的参考价值。
一、axios
1、介绍
2、使用
<!DOCTYPE html>
<html lang="en">
<head>
<title>axios使用</title>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) in userList">
index：{{index}}
name：{{item.name}}
age：{{item.age}}
</div>
</div>
<script>
// 创建一个 vue 对象
new Vue({
// 绑定 vue 的作用域
el : '#app',
// 定义页面中显示的数据模型
data : {
userList : []
},
// 页面渲染之前执行
created() {
// 调用定义的方法
this.getUserList();
},
// 编写具体的方法
methods: {
getUserList() {
// axios.请求方式("请求接口").then().catch();
// then：请求成功执行的方法
// cath：请求失败执行的方法
axios.get("data.json")
.then(response => {
console.log(response);
this.userList = response.data.data.item;
})
.catch(error => {
})
}
}
})
</script>
</body>
</html>
二、element-ui 组件
1、介绍
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
官网：<Element - 网站快速成型工具>
三、node.js
1、介绍
官网：<Node.js (nodejs.org)>
2、使用
（1）新建 01.js 文件
console.log('hello node.js！');
（2）在 01.js 文件所在的路径打开命令行窗口
（3）输入命令
node 01.js
看到 hello node.js！ 就说明成功了！
四、npm
1、介绍
2、使用
（1）npm 项目初始化操作
在命令行窗口输入命令：
npm init
初始化完成后会有一个 package.json 文件，类似于 maven 的 pom 文件。
# 使用默认的信息初始化项目
npm init -y
（2）npm 下载 js 依赖
设置镜像地址：
# 设置镜像地址，这里使用的是淘宝的镜像
npm config set registry https://registry.npm.taobao.org
# 查看 npm 配置信息
npm config list
下载依赖：
# 例：npm install jquery@版本号
# 可以不指定版本号
npm install 依赖名称
根据 package.json 文件下载依赖：
npm install
五、babel
1、介绍
2、使用
（1）安装 babel 工具，使用命令
npm install -global babel-cli
# 查看是否安装成功
babel --version
（2）初始化项目
npm init -y
（3）创建 js 文件
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
（4）配置 .babelrc
{
// 设置转码规则
"presets": ["es2015"],
"plugins": []
}
（5）安装转码器
npm install --save-dev babel-preset-es2015
（6）转码
# 转码结果写入一个文件
mkdir dist1
# 指定文件转码
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
【babel src/example.js -o dist1/compiled.js】
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
【babel src -d dist2】
六、模块化
1、介绍
2、使用
（1）es5 写法
01.js 文件（定义方法）
// 1 定义方法
const sum = function(a, b) {
return parseInt(a) + parseInt(b);
}
const subtract = function(a, b) {
return parseInt(a) - parseInt(b);
}
// 2 设置你的哪些方法可以被其他 js 调用
module.exports = {
sum,
subtract
}
02.js 文件（调用方法）
// 调用方法
// 1 引入 js
const m = require('./01.js');
// 2 调用
console.log(m.sum(1, 2));
console.log(m.subtract(1, 2));
（2）es6 写法
注意：这时的程序无法运行的，因为 ES6 的模块化无法在 Node.js 中执行，需要用 Babel 编辑成 ES5 后再执行。
第一种写法：
导出模块：
export function getList() {
console.log('获取数据列表')
}
export function save() {
console.log('保存数据')
}
导入模块：
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()
转换成 es5：
babel es6model -d es6model_es5
第二种写法
导出模块：
export default{
getList(){
console.log("获取数据列表2");
},
save(){
console.log("保存数据2");
}
}
导入模块：
import user from "./userApi2"
user.getList();
user.save();
转换成 es5：
babel es6model -d es6model_es5
七、webpack
1、介绍
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。减少了页面的请求。
2、使用
（1）安装 webpack 工具
npm install -g webpack webpack-cli
（2）安装后查看版本号
webpack -v
（3）common.js 文件
exports.info = function (str) {
document.write(str);//在浏览器中输出
}
（4）创建 utils.js 文件
exports.add = function (a, b) {
return a + b;
}
（5）创建 main.js 文件
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!'+ utils.add(100,200));
（6）js 打包
webpack 目录下创建配置文件 webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件，main.js文件中已经引入了另外两个js文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路
径,
filename: 'bundle.js' //输出文件
}
}
执行编译命令
webpack # 有黄色警告
webpack --mode=development # 没有警告
# 执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
（7）CSS 打包
Webpack 本身只能处理 javascript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以
理解为是模块和资源的转换器。
安装style-loader和 css-loader：
npm install --save-dev style-loader css-loader
修改 webpack.config.js：
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
创建 body.css：
body{
background:pink;
}
修改 main.js：
在第一行引入 body.css：
require('./body.css');
执行打包指令：
webpack --mode=development
八、搭建项目前端环境
1、介绍
2、前端页面框架介绍
使用框架：vue-admin-template-master
（1）程序入口
index.html、src/main.js
（2）主要基于两种技术
vue、element-ui
（3）build 目录
做一些编译和项目构建之类
（4）config 目录
项目的一些配置，比如端口号等
index.js（配置端口号）
dev.env.js（配置接口)
（5）node_module 目录
一些项目的依赖
（6）src 目录
- api 定义调用方法
- assets 放一些静态资源
- component 其他插件
- icons 放一些图标
- router 页面中的路由部分
- store 放一些脚本文件
- styles 放一些 css
- utils 放一些工具类
- views 项目中具体的页面
3、前端页面框架登录问题
这个是正常的，服务器出问题了。
以上是关于谷粒学院第四天的主要内容，如果未能解决你的问题，请参考以下文章