Element UI 学习 采用了b站黑马程序员的学习

Ajax

1. Asynchronous JavaScript And XML，异步的JavaScript和XML。

2. 作用：

• 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

• 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

 3. 引入ajax 在html中引入。

<script src="js/axios-0.18.0.js"></script># 要在js中有ajax包

• 发送get请求

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

• 发送post请求 返回数据

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

Vue项目创建

环境准备

1.安装nodejs

https://nodejs.cn/
#检查
node -v
#设置全局安装路径
config set prefix "路径"
#配置npm
npm config get prefix
#切换淘宝镜像
npm config set registry 淘宝镜像

1. 安装Vue-cli脚手架 在cmd执行

npm install -g @vue/cli

vue ——version

创建工程化vue项目

1. 创建一个文件夹

2. 在文件夹中调用cmd指令

vue ui

 3.点击创建就行，关闭初始化git仓库

 4.手动配置

5.运行vue项目

• 点击项目右击运行vue脚手架

• 在vue.config.js里面改变端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 transpileDependencies: true,
 devServer:{
  port:7000
 }
})

• 在App.vue中编写页面

#html
<template>
  <div >
  <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

#js
<script>
// import EmpView from './views/tlias/EmpView.vue';
// import ElementView from './views/element/ElementView.vue';
export default{
  // components:{ElementView},
  // components:{EmpView},
  data(){
    return{
      message:"hello "
    }
  },
  methods:{
  }
}
</script>
#css
<style>

</style>