Vue-----day2

Node.js

概念

• JS如果只是运行在浏览器上的话，用于控制HTML元素的行为。

• 如果有一个能够脱离浏览器，也能解析JS的运行环境，就能通过JS进行服务端的开发。

• 浏览器之所以能够解析JS，是因为每个浏览器都有一个解析JS的引擎。

• 其中效率最高的是谷歌浏览器的V8引擎。

• Node.js是一个基于V8引擎的JavaScript运行环境。

• Node.js类似与Java的JVM。

使用

下载安装

• 建议下载LTS长期维护版https://nodejs.org/zh-cn

• 旧版本https://nodejs.org/zh-cn/download/releases

• 安装成功后，在控制台输入"node -v"，显示当前Node.js版本

• 可以新建一个.js文件，通过"node js文件"命令来执行该js文件

  console.log("hello world");
  

  

Vue工程创建

1.安装Node.js

2.安装npm

npm是Node.js的默认包管理器，用于管理js文件。类似于Java中的Maven管理jar文件。

安装了Node.js后，自动会安装npm，这里只需更改其下载js的路径即可

控制台输入npm -v查看npm版本

控制台输入npm config get registry查看js下载地址

3.修改npm默认下载资源的地址

方式一：直接修改npm默认下载地址

改为国内站点：淘宝npm镜像，在控制台输入

npm config set registry https://registry.npmmirror.com

方式二：额外添加一个指令，用国内站点下载

npm install -g cnpm --registry https://registry.npmmirror.com

这样不会修改原本npm的下载路径，之后通过cnpm指令使用国内站点下载

4.创建工程

1、在要创建的目录里，进入控制台

2、输入npm create vue@latest，会弹出创建工程的选项，可以通过左右键选择

3、创建成功后的这三句话表示

• cd vue3-demo 进入目录

• npm install 下载工程所需的js文件

• npm run dev 启动工程

4、启动工程后，保持控制台界面开启，在浏览器中输入localhost:5173即可进入创建好的Vue3工程。

使用VSCode管理Vue工程

VSCode是一款热门主流的编辑器，可以安装丰富的插件，实现对各种语言的支持。

常用插件和设置

1、插件

2、中文

3、Volar

4、IDEA快捷键方案

5、内置浏览器

设置

1、自动保存

2、主题

将创建好的Vue工程目录，整体拖入VSCode中即可

运行Vue工程

如果创建好Vue工程后，直接使用VSCode管理时，还需输入npm install安装js文件，如果已经安装，直接输入npm run dev后，打开浏览器输入localhost:5173

Vue工程目录结构

在创建好的Vue工程中自定义页面访问

1.在views的目录下，新建一个.vue文件

.vue文件类似于.java文件，需要编译后生成最终页面

.vue文件中有三个根标签

• template：用于定义页面中的标签

  • vue2.x版本中，template下只能有一个根标签
  • vue3.x版后，template下没有标签的限制

• style：页面中的css代码

• scrip：页面中的js代码

在这里插入图片描述

<template> 
    <!-- 定义页面中的节点 -->
    <h1>我的页面</h1> 
</template> 
<!-- scoped表示样式只能在当前页生效 -->
<style scoped> 
    /* 控制节点的CSS样式 */
    h1 {
        color: red; 
    }
</style> 
<!-- lang="ts"表示支持ts setup是对于setup()函数的简写--> 
<!-- <script setup>中的代码会在每次组件实例被创建的时候执行 --> 
<script setup lang="ts"> 
    // JS代码 
    console.log("hello vue3");
</script>

2. 设置页面的请求映射

import { createRouter, createWebHistory } from 'vue-router'
// 方式一中导入某个.vue文件的代码 
import HomeView from '../views/HomeView.vue' 
// import MyPage from '../views/MyPage.vue' 
// 路由表 
// 用于决定某个.vue页面使用什么映射访问
// 设置访问方式一：先导入.vue页面，让其成为一个组件，再在routes中使用该组件 
// 设置访问方式二：在routest中直接导入某个.vue页面
const router = createRouter({ 
    history: createWebHistory(import.meta.env.BASE_URL),
    // 通过对象数组的形式定义访问映射
    routes: [ 
        // path表示访问映射，name没有限制，component为上方import的某个组件 
        //这里表示可以通过/访问../views/HomeView.vue页面 
        { 
            path: '/', 
            name: 'home', 
            component: HomeView 
        },{
            path: "/myPage",
            name: 'myPage',
            // component: MyPage 先导入，再引入 
            component: () => import('../views/MyPage.vue')//直接导入并引入
        },{ 
            path: '/about', 
            name: 'about',
            component: () => import('../views/AboutView.vue') }
    ] 
})export default router

3.在首页中设置访问的链接

<template> 
    <header> 
        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
        <div class="wrapper">
            <HelloWorld msg="You did it!" />
            <nav> 
                <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink>
                <RouterLink to="/myPage">我的页面</RouterLink> 
            </nav> 
        </div>
    </header> 
	<RouterView /> 
</template>

在App.vue中有两个核心标签

• 用于显示.vue页面的容器

• 用于访问指定的path对应的.vue页面

vue文件详解

每一个.vue文件中，至少需要template或script标签。

• 在template中定义页面中出现的标签。

• script中定义js。

表示页面加载后开始执行其中定义的内容。

onMounted()函数

当每次访问页面时，都会执行onMounted()函数，通常用于访问后端接口。

<script setup lang='ts'> 
    import {onMounted} from 'vue'; 
	onMounted(()=>{ 
        //页面加载时要执行的内容
    });
</script>

页面中定义数据

一、ref函数和reactive函数

这两个函数都需要先引入后使用。

引入：import {ref,reactive} from ‘vue’

• ref()函数

  • 可以定义任意类型的数据
  • 在函数中使用时，需要通过.value才能获取值

• reactive()函数

  • 不能定义简单类型的数据，如字符串、数值
  • 在函数中直接使用
  • 属于ref()的子集，当使用ref()定义复杂类型的数据时，实际也是使用reactive()函数

<template> 
    //template中使用定义的数据，直接使用 
    <h3>{{msg}}</h3> 
    <h3>{{person.name}} </h3> 
    <ul>
        <li v-for="(item,index) in list">{{item}}</li>
    </ul> 
</template> 
<script setup lang='ts'> 
    import {ref,reactive} from 'vue'; 
    //声明值 
    //const 常量名 = ref(任意值)/reactive(非简单类型值); 
    const msg=ref('普通字符串'); 
    const count=ref(123); 
    const person=reactive({ 
        name:'ez',
        age:20 
    });
    const list = reactive([123,2,33,4]) ;
</script>

二、页面中定义函数

• const 函数名 = function(){}

• const 函数名 = ()=>{}

<template> 
	<button @click="addCount()">{{count}}</button> 
	<button @click="addAge()">{{person.age}}</button> </template> 
<script setup lang='ts'> 
    import {ref,reactive} from 'vue'; 
    const count = ref(0); 
    const person = reactive({ 
        name:'ez',
        age:20 
    });
    const addCount=function(){ 
        //count是ref定义，需要.value
        count.value++;
    };
    const addAge=()=>{
        //age是person的属性，由reactive定义，不需要.value
        person.age++; 
    } 
</script>

使用Axios访问后端接口

这里通过.json文件模拟后端接口

axios是一个http请求组件，类似于ajax。

一、安装到项目中

• 在项目中新建终端

• 输入npm install axios

二、在页面中使用

先导入axios组件

• import axios from ‘axios’

• axios.get(“url”);表示使用axios通过get请求访问指定的url

• axios.get(“url”).then(res=>{res表示访问的结果，数据保存在res.data中});表示访问后的回调函数，通常用于获取访问的结果

<template>
    <table>
        <tr v-for="(item, index) in state.personInfo">
            <td>{{ item.id }}</td> 
            <td :title="item.sign">{{ item.username }}</td> 
            <td>{{ item.sex }}</td> <td>{{ item.email }}</td> 
        </tr> 
    </table>
</template>
<style scoped> 
    table { 
        border: 1px solid red;
        width: 100%; 
        border-collapse: collapse;
    }
    td {
        border: 1px solid skyblue; 
    } 
</style>
<script setup lang="ts">
    
    import { onMounted, reactive } from 'vue'; 
    // 导入axios工具 import axios from 'axios'; 
    //定义state的值，用于保存当前页面中可能要用到的数据 
    const state = reactive({ 
        personInfo: [], 
        msg: '', 
        count: 0 
    }); 
    //通过访问json文件来模拟访问后端接口。在访问该页面时访问json文件。
    onMounted(() => { 
        //通过类似于ajax的axios访问.json文件
        //axios.get("后端接口路径"); axios.get("http://192.168.125.3/appName/xxxx"); 
        //axios.get("url").then(ref=>{这里的res就是返回结果，访问后的数据在其中的data属性里}); 获取请求后的返回值 
        axios.get("../../public/data.json").then(res => {
            //res.data就是json文件中的所有内容 
            // res.data.data就是json文件中的名为data的属性
            state.personInfo = res.data.data;
        });
    }); 
</script>

请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

post请求改写成如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

vue组件库

饿了么公司推出的element是常用的主流vue组件库

• vue2.x版本，使用element-ui

  • https://element.eleme.cn/2.13/#/zh-CN

• vue3.x版本，使用element-plus

  • https://element-plus.org/zh-CN/

使用ElementPlus

1、在项目中新建终端，输入npm install element-plus --save

2、创建一个空白的Vue3工程

• 按创建Vue3工程的流程，使用VSCode打开。

• 删除

  • component目录下的所有内容
  • views目录下的所有内容
  • assets目录下的所有内容
  • main.ts中的引入样式

import { createApp } from 'vue' 
import App from './App.vue' 
import router from './router'
const app = createApp(App) 
app.use(router) 
app.mount('#app')

• router目录下的index.ts文件中涉及到.vue文件的内容

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({ 
    history: createWebHistory(import.meta.env.BASE_URL), 
    routes: [ 
        /* {
        path: '/about', 
        name: 'about',
        component: () => import('../views/AboutView.vue')
        } */ 
    ] 
})export default router

• App.vue中删除所有，重新定义跟标签

<template>

</template> 

<style>

</style> 

<script setup lang="ts">
    
</script>

3、在main.ts中粘贴

要注意app.mount(‘#app’)要在最后

import { createApp } from 'vue' 
import App from './App.vue'
import router from './router' 
// elementplus相关 
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 

const app = createApp(App) 

app.use(router) 
app.use(ElementPlus)

app.mount('#app')

图标的使用

建议先全局引入所有图标组件，再使用图标标签即可

在main.ts中加入

import * as ElementPlusIconsVue from '@element-plus/icons-vue' 
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { 
    app.component(key, component) 
}

在要使用图标的地方，复制图标代码即可

<el-icon><Promotion /></el-icon>

导航切换页面

1.在view目录下自定义.vue页面，在router下index.ts(路由表)中设置访问该页面的path

2.复制导航条的代码

• el-menu标签中，如果添加router属性值后，就能让index的值与router下index.ts(路由表)中的path相对应

<el-menu default-active="1-3" router class="el-menu-vertical-demo">
    <el-sub-menu index="one"> 
        <template #title>
            <el-icon> 
                <location />
             </el-icon>
		<span>Navigator One</span> 
        </template>
        <el-menu-item index="myPage">
            <el-icon> <Promotion /> </el-icon>
            菜单一 
        </el-menu-item> 
        <el-menu-item index="1-2">item 2</el-menu-item> 
        <el-menu-item index="1-3">item 3</el-menu-item> 
    </el-sub-menu> 
    <el-menu-item index="2"> 
        <el-icon> <Promotion /> </el-icon> 
        <span>Navigator Two</span> 
    </el-menu-item> 
</el-menu>

3.在适当的位置添加容器用于显示vue页面

<el-main> 
    <!-- 显示vue页面的容器 --> 
 	<RouterView /> 
</el-main>