Vue修炼手册 Day02-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44233253/article/details/116244601

Vue修炼手册第二章

1. Vue的网络数据操作
- 1.1 axios的使用
- 1.2 axios应用的Demo
2. Vue的布局
- 2.1 ElementUI的引入
- 2.2 ElementUI的简单使用
3. Node.js npm Vue-cli
4. 使用图形化界面创建Vue工程
- 4.1 创建步骤

1. Vue的网络数据操作

JavaScript中的网络请求可以依靠Ajax ，同理，Vue中的网络请求依靠的是axios

1.1 axios的使用

①导入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②在方法中书写axios

请求方法可以是多样的，例如get、post

then方法中的回调函数会在请求成功和失败时触发

通过回调函数的形参可以获取响音内容或错误信息

axios.get(地址).then(function(response){},function(err){})

1.2 axios应用的Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="../VueDay_01/js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <button @click="registerUser">判断用户注册</button>
        <br>
        <input type="text" v-model="username"><span v-text="msg"></span>
        <br>
        <ul>
            <li v-for="item in jokes">
                {{item}}
            </li>
        </ul>
    </div>

</body>
<script>
    const app = new Vue({
       el:"#app",
       data:{
           jokes:[],
           username:"",
           msg:""
       },
       methods:{
           getJoke(){
               axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (resp) {
                   app.jokes=resp.data.jokes;
               })
           },
           registerUser(){
               axios.post("https://autumnfish.cn/api/user/reg",{username: this.username}).then(function (resp) {
                   if (resp.data=="注册成功"){
                       app.msg="注册成功";
                   }else{
                       app.msg="用户名已注册";
                   }

               })
           }
       }
    });

</script>
</html>

2. Vue的布局

2.1 ElementUI的引入

    <!--①引入elementui的css样式-->
    <link rel="stylesheet" href="./css/index.css">
    <!--②引入vue的js 必须在elementui的js引入前引入-->
    <script src="./js/vue.js"></script>
    <!--③引入elementui的js-->
    <script src="./js/index.js"></script>

2.2 ElementUI的简单使用

（1）html代码

     <div id="app">
         <el-container class="box">
             <el-header>Header</el-header>
             <el-container>
                 <el-aside width="200px">Aside</el-aside>
                 <el-main>Main</el-main>
             </el-container>
             <el-footer>
                 footer
             </el-footer>
         </el-container>
     </div>

（2）将标签挂载至Vue对象上

<script>
    /*⑤创建vue对象*/
     var app=new Vue({
           el:"#app"
     })
</script>

（3）CSS代码

   <style>
        body,html,#app,#box{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
        }
        .el-aside .el-menu{
            border: none;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>

3. Node.js npm Vue-cli

3.1 什么是Node.js、npm和Vue-cli

举个栗子，瞬间明白：
node.js前端的服务器理解为web中的tomcat
npm 下载项目依赖，例如elementui axios，可以理解为maven仓库
Vue-cli就是用于快速生成Vue项目基础架构,简化程序员创建Vue项目的工具。

3.2 安装Node.js

①Node.js官网网址 https://nodejs.org/en/
下载过后傻瓜式安装
npm node.js自带，无需再次下载

②安装完毕后检查是否安装成功，打开cmd
输入node -v和npm -v，如图即为安装成功
在这里插入图片描述
③配置npm淘宝镜像
正如Maven有阿里镜像一样，npm有淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

检查是否配置成功cnpm -v,如图即为配置成功
在这里插入图片描述

3.3 安装Vue-cli

cnpm install -g @vue/cli

在这里插入图片描述
检查是否安装成功vue --version

4. 使用图形化界面创建Vue工程

vue ui

在这里插入图片描述
输入命令后会自动弹出Vue可视化界面，或者浏览器访问红色框中地址

4.1 创建步骤

①
在这里插入图片描述
②

③
④

⑤工程创建完毕进入插件市场，选择工程中需要的依赖

本栗中下载了如下插件

同样，这里我们也可以用命令模式加载插件依赖

npm i element-ui -S

element-ui:需要安装的依赖名称

⑥启动项目
（1）图形化界面
在这里插入图片描述
（2）命令模式运行

npm run serve

在这里插入图片描述