day03学习笔记：
一、学习目标：
1.学会Vue的基本使用：
2.学会前端工程化：AJAX异步请求，Axios的框架使用；
3.学习element组件的使用，完成一个小案例；
二、Vue的使用：
Vue是前端JS的框架，Vue.js 的核心采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，可以简化原生JS针对DOM操作—虽然感觉不明显，可能学习得还不是很精通。
当前学习的黑马课程版本好像有点落后，用的还是Vue2，现在最新是Vue3，Vue2已经不维护了
官网地址：https://v2.cn.vuejs.org/v2/guide/
Vue的使用有两种方式：
1.引入：使用Vue需要下载一个Vue.js文件，或者按照官网的地址来引入
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
2.安装Vue CLI–脚手架，完成前端工程化的安装部署；
1）Vue的入门使用步骤：
1.在script标签中new一个Vue实例，例如下面的步骤1：
2.编写视图层，记得绑定Vue的el（element元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习02</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
//步骤2：定义id=app，这是视图层，这里展示的数据来自于Vue,这里的数据也会影响Vue里的data
<div id="app">
{{ message }}
</div>
</body>
<script>
//步骤1：new一个Vue实例
var vm = new Vue({});
//中间{}是一个对象，对象里又装了一个对象data,data有对应的属性message，当message改变，外面的引用也发生改变.类似于java中的：Cat c = new Cat(10);
/*new Vue({
data:{
message: 'Hello Vue!'
}
})
*/
new Vue({
el:"#app",
data:{
message: 'Hello Vue!'
}
})
</script>
</html>
2）Vue的指令：https://v2.cn.vuejs.org/v2/guide/
注意：v-bind只是绑定数据而已，v-model可以修改数据。例如：
<input type="text" v-model="url">
便捷写法：
1）v-bind:href <=> :href
2）v-on:click <=> @click
仔细看使用案例，注意指令的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习02</title>
<script src="js/vue.js"></script>
<style>
table,th,td{
border: 1px solid black;
border-collapse: collapse;
/* width:50px; */
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">//该标签是绑定了Vue实例的，Vue实例中有一个对象，包含JSON数据
<a v-bind:href="url">百度一下</a>//给数据绑定属性v-bind
<br><br>
<table >
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr v-for="(user,index) in users"> //对Json字符串循环取值
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if="user.gender==1">男</span>//使用if判断
<span v-else>女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score>=85">优秀</span>
<span v-else-if="user.score<=85&&user.score>=60">及格</span>
<span v-else>不及格</span>
</td>
</tr>
</div>
</table>
</body>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com",
users:[{
name:"Tom",
age: 20,
gender: 1,
score:78
},{
name: "Rose",
age: 18,
gender:2,
score:86
},{
name: "Jerry",
age: 26,
gender:1,
score:90
},{
name: "Tony",
age:30,
gender: 1,
score: 52
}]
}
})
</script>
</html>
3）Vue的生命周期
<script>
new Vue({
el: "#app",
//一般这里就是数据模型了
data: {
},
//需要再挂载后执行方法，就可以在这里写一个钩子方法
mounted() {
console.log("Vue挂载完毕,发送请求获取数据");
},
//其他的函数方法，可以在这里写
methods: {
},
})
</script>
三、异步请求
1）AJAX的使用：
是一个异步加载，网页在执行的时候，后台异步发送数据请求，使用人员是感受不到的，所以称为异步。因为使用起来，要写非常多的代码，渐渐都用axios这个框架了
2）Axios的使用：
官网： https://www.axios-http.cn/
1.axios使用步骤：引入axios的js文件
2.在Vue的方法中使用axios发起异步请求：
<script>
new Vue({
el:"#app",
data:{
users:[]
},
mounted() {
//axios的使用
axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list")
.then((response) =>{
// console.log(response.data);
this.users = response.data.data;
// console.log(this.users);
})
.catch(error =>{
console.error(error);
});
}
})
</script>
四、前端工程化
1）接口平台
YAPI：一个接口平台，帮忙生成接口文档和协助联调测试的，和市面上很多的都有所类似，这个是在线的。
地址： http://yapi.smart-xwork.cn/
2）环境部署：
Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板
1.需要安装NodeJS
注意：在安装NodeJS的时候，需要配置淘宝镜像，黑马课程的淘宝镜像已经失效，需要更换。
黑马课程的淘宝镜像已经失效：npm config set registry https://registry.npm.taobao.org
新的淘宝镜像：npm config set registry https://registry.npmjs.org/
2.安装vue-cli；
3.Vue项目介绍。安装完成后，即可运行：在命令行输入vue ui，即可进入图形化界面。然后按提示进行操作，创建出Vue项目目录如下：
点击package.json：打开运行界面；ctrl+c：停止运行
在vue.config.js中，可以修改默认端口
Vue中以.vue结尾的文件来操作。主要包含三部分：一般定义的
Vue的执行顺序：
1.public有个index.html文件，其中定义了一个div id = app
2.index.html会调用main.js文件，main.js文件又引入了App.Vue，所以最终展示效果是App.vue写的样式内容
修改后：
3）Element组件库使用
官网:https://element.eleme.cn/#/zh-CNListener
1.先安装element-ui
2.引入element组件
按照官网的提示引入element组件：
示例，构建一个Element.vue，写对应的<script><style>，然后在App.vue中引用element-view，这样就可以展示你的内容了。
先写ElementView.vue
然后引入
最终展示成果：
4）案例训练
案例要求：
开发步骤：
1)建立工程文件夹，建立对应的View.vue;
2)根据页面原型，从element样本库，找对应的代码文件进行调整开发；
最终效果展示（CSS实在掌握得不好…）：
5）Vue路由配置
要实现左边的点击不同链接，网页进行相对应跳转的功能，就要配置路由；
1.在App.Vue把原来的具体文件View，改为路由View
2.配置router目录下的index.js文件（要把没引用到的去掉）
注：路径的写法中可以用@来表示–以上回答来自chatGPT
在 Vue 项目中，特别是当使用 Vue CLI 创建的项目时，@ 是一个路径别名，它通常指向项目的 src 目录。这是 Webpack 提供的一个功能，允许开发者使用更简洁的路径来引用项目中的文件，而不是使用相对路径或绝对路径。
在你给出的代码片段中：
javascript
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
}
这里的 @/views/404 实际上是指向 src/views/404 的路径。所以，component: () => import('@/views/404') 是动态地导入 src/views/404 这个组件。
这种路径别名的好处是：
简洁性：使用 @ 可以让路径更短，更易于阅读和维护。
可维护性：如果未来项目的结构发生变化（例如，src 目录的名称或位置改变），你只需要在一个地方（通常是 Webpack 的配置文件）更新这个别名，而不需要在项目中的每个文件里都进行更改。
在 Vue CLI 创建的项目中，你可以在 vue.config.js 文件中看到或配置这些路径别名。但通常，@ 指向 src 的配置是默认的，不需要额外配置。
3.在对应的View中添加上路由链接
四、项目打包部署：
1）打包：打包后会生成dist目录，存放着资源文件，最后只要把这个放到服务器上就好了
2）部署，这里前端文件采用nginx部署。先下载nginx。把dist资源文件放到nginx的html文件中。
双击nginx.exe，启动后就可以直接访问到了：http://localhost:90/
24万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
