一、Axios，发送ajax请求
axios是独立的项目，不是Vue里面的一部分。axios经常和vue一起使用，实现ajax操作
Axios的应用场景
Axios使用
创建html页面。引入js文件，包含两个js文件：Vue和Axios
手动构建json数据
{ "success":true, "code":20000, "message":"成功", "data":{ "items":[ {"name":"lucy","age":20}, {"name":"mary","age":30}, {"name":"jack","age":40} ] } }使用Axios发送ajax请求文件，得到数据，在页面显示
<body> <div id="app"> <!--把userList数组里面的数据显示，使用v-for指令--> <div v-for="user in userList"> {{user.name}} -- {{user.age}} </div> </div> <script src="vue.min.js"></script> <script src="axios.min.js"></script> <script> new Vue({ el: '#app', // 固定的结构 // 在data里定义变量和初始值 data: { // 定义变量，值空数组 userList:[] }, // 页面渲染之前执行 created(){ // 调用定义的方法 this.getUserList() }, // 编写具体的方法 methods:{ // 创建方法：查询所有用户的数据 getUserList(){ // 使用axios发送ajax请求 // axios.提交方式("请求接口的路径").then(箭头函数).catch(箭头函数) axios.get("data.json") .then(response => { // response就是请求之后返回的数据 // 通过response获取具体数据，赋值给空数组 this.userList = response.data.data.items console.log(this.userList) }) // 请求成功执行then()方法 .catch(error => { }) // 请求失败执行catch()方法 } } }) </script> </body>
二、element-ui
element ui 是基于vue的一个UI框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
官网：传送门
三、Node.js
node.js是什么？
- 简单来说，Node.js就是运行在服务端的JavaScript。
- 不需要浏览器，直接使用node.js运行JavaScript代码。
- 模拟服务器的效果，比如Tomcat。
安装node.js
检查是否安装成功：
node -v，若出现版本号，则说明安装成功使用node.js执行JavaScript代码
// 1.js代码 console.log('hello, node.js') // 2.在该文件夹下运行cmd（在VScode中运行命令可能会报错） // 输入命令：node 01.js // 4.输出结果：hello, node.js使用node.js模拟服务器的效果
// 02.js const http = require('http') http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据 "Hello World" response.end('Hello Server'); }).listen(8888); // 终端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');// 1.找到02.js所在文件夹 // 2.在该文件夹下运行cmd（在VScode中运行命令可能会报错） // 3.在命令行执行命令 node 01.js // 4.命令行输出：Server running at http://127.0.0.1:8888/ // 5.在浏览器中访问http://127.0.0.1:8888/ 结果：Hello Server
四、npm
npm是什么？
NPM全称：Node Package Manager，是Node.js的包管理工具，联网下载js的依赖，比如jquery。相当于Java的maven。
查看npm是否安装成功：使用命令npm -v
演示NPM的具体操作
npm初始化项目
npm init然后一路点回车（使用默认），项目初始化之后，生成文件package.json，类似于后端的pom.xml
也可以使用命令：
npm init -y直接生成文件package.json（全部使用默认）
npm下载js的依赖
设置镜像地址
npm config set registry https://registry.npm.taobao.org # 设置镜像 npm config list # 查看npm配置信息使用命令下载依赖
npm install 依赖名称 npm install jquery npm install jquery@2.1.x # 下载指定版本的jquery根据配置文件下载依赖
npm install
五、babel
babel是转码器，把es6代码转换成es5代码。因为写的代码是es6代码，但是es6代码浏览器的兼容性很差，es5代码浏览器的兼容性好，而babel的作用就是把es6代码转换为es5
安装babel工具，使用命令：
npm install --global babel-cli检查babel是否安装成功：
babel --version # 在dos命令行执行创建js文件，编写es6代码
// 转码前 // 定义数据 let input = [1,2,3] // 将数组的每一个元素 +1 input = input.map(item => item + 1) console.log(input)创建babel配置文件（.babelrc)
{ # 转换规则 "presets":["es2015"], "plugins": [] }安装转码器
npm install --save-dev babel-preset-es2015使用命令进行解码
根据文件转码
// 目标：把es6文件夹中的01.js转码成es5，放到dist文件夹中 // 在dos命令行中操作 babel es6/01.js -o dist/001.js根据文件夹转码
// 在dos命令行中操作 babel es6 -d dist
六、模块化
模块化是什么？
后端模块化：
开发后端接口的时候，开发controller、service、mapper，controller层调用service层，service层注入mapper层
在后端中，类与类之间的调用称为模块化操作
前端模块化：
在前端中，js与js之间的调用称为前端的模块化
es5实现模块化操作
在01.js中定义方法，在02.js中调用01.js里面的方法
// 01.js // 1.创建js方法 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 // 调用01.js里面的方法 // 1.引入01.js文件 const m = require('./01.js') // 2.调用 console.log(m.sum(1,2)) console.log(m.subtract(10,3))测试（进入vscode里的命令行）
node 02.js
es6实现模块化操作
注意：这时的程序是无法运行的，因为es6的模块化无法在node.js中执行，需要用babel编辑成es5后再执行。
面试题：在项目中遇到了什么问题？怎么解决的？
答：在前端开发中遇到一个问题，用es6写模块化代码，但是发现该代码在node.js中不能运行。后来通过查找资料解决了，把es6变成es5做运行。
// 代码写在babeldemo包中 // 01.js // 定义方法，设置哪些方法可以被其他js调用 export function getList(){ console.log('获取数据列表') } export function save(){ console.log('保存数据') } // 02.js // 调用01.js的方法，引入01.js文件进行调用 import { getList,save } from "./01"; // 调用方法 getList() save()需要将es6的代码转为es5的代码
# 在dos命令行执行 babel modulees61 -d modules611# 在vscode的命令行执行 node 02.js进一步简化
es6写法2
// 01.js // 定义方法，设置哪些方法可以被其他js调用 export default { getList(){ console.log('获取数据列表') }, save(){ console.log('保存数据') } } // 02.js // 调用01.js的方法，引入01.js文件进行调用 import m from "./01"; // 调用方法 m.getList() m.save()# 在dos命令行执行 babel modulees62 -d es622 # 在vscode的命令行执行 node 02.js
七、webpapck
Webpack是一个前端资源加载/打包工具，把多个静态文件（如js、css文件等）打包成一个静态文件，可以减少页面的请求次数，提高页面的访问效率。
具体步骤
安装webpack工具
npm init -y // 初始化项目 npm install -g webpack webpack-cli // 安装 webpack -v // 查看是否安装成功，此命令需要在dos命令行中执行创建三个js文件用于打包操作
// 在common.js和utils.js中定义方法 exports.info = function(str){ document.write(str) // 在浏览器中输出 } exports.add = function(a,b){ return a + b; } // 在main.js中引入common和utils const common = require('./common') const utils = require('./utils') common.info('hello common' + utils.add(1,2))创建webpack的配置文件，配置打包信息（webpack.config.js）
const path = require('path'); //node.js内置模块 module.exports = { entry:'./src/main.js', //配置入口文件 output:{ // 输出路径，__dirname：当前文件所在路径 // 需要事先创建好dist文件夹（在webpackdemo下） path:path.resolve(__dirname,'./dist'), filename:'bundle.js' // 输出文件 } }使用如下命令进行打包操作
// 如下两条命令均需要在dos命令行中执行 webpack // 有黄色警告 webpack --mode=development // 没有警告测试
// 创建html文件（01.html），引入打包之后的js文件，使用浏览器查看效果 <script src="dist/bundle.js"></script>
打包css文件
创建css文件，写样式内容
body{ background-color: violet; }在main.js中引入css文件
// 引入css文件 require('./style.css')安装css加载工具
npm install --save-dev style-loader css-loader修改webpack配置文件
module:{ rules:[ { test:/\.css$/, // 打包规则应用到以css结尾的文件上 use:['style-loader','css-loader'] } ] }打包
webpack --mode=development测试
// 01.html <script src="dist/bundle.js"></script>
八、搭建项目的前端环境
选取一个模板（框架）进行环境搭建
模板：vue-admin-template
启动项目：
npm run dev
使用老师提供好的 vue-admin-1010 还是报错的解决方案：
导入老师的vue-admin-1010
npm install cnpm -g
cnpm install node-sass
cnpm i node-sass -D
删除node_modules文件夹
cnpm install
npm run dev
注：老师的
vue-admin-1010在b站谷粒学院的评论区可以找到
前端页面环境说明：
前端框架的入口
- index.html
- src/main.js
前端页面环境使用框架（vue-admin-template模板），主要基于两种技术实现
- vue
- element-ui
框架中的build目录
放项目构建的脚本文件
框架中的config目录
- index.js中可以修改端口号等基本信息
- 把useEslint值改为false（Eslint是一个代码检查插件，但是检查的太严格了，不建议装）
- dev.env.js中可以修改访问后端的接口地址（需要修改）
- index.js中可以修改端口号等基本信息
框架中的src目录
- api中定义调用方法（需要修改）
- assets中放静态资源
- components中放插件、组件
- icons中放项目中使用到的图标
- router（路由），项目中要用到的路由部分
- store没什么用
- styles中放样式文件（不用改）
- utils中放工具类（不用改）
- views：写项目中具体的页面（需要修改）
