《移动应用开发》实验报告——Vue

比眉伴天荒 2022-11-19 04:15 209阅读 0赞

# **实验目标** #

1.  熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。
2.  学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。

# **实验内容** #

1.  使用Vue-CLI脚手架工具，用命令的方法搭建一个Web项目，项目名称为myvue01，在项目中创建一个页面（修改为首页），单击按钮，在Div中显示Hello World！。
2.  使用Vue-CLI脚手架GUI工具，创建一个Web项目，项目名称为myvue02，编写一个简单的登录页面（修改为首页），点击登录按钮，可提示信息（或跳转到新的欢迎页面）。

本题可以选择以下方法中的一种：

1）.可以做得简单一点，只是搭建出效果。

2）.使用模拟数据进行用户名和密码验证。

# **实验详细过程和步骤** #

## **题一** ##

1、搭建项目myvue01

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70][]

2、项目目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 1][]

3、

<template>
      <img alt="Vue logo" src="./assets/logo.png">
      <Dashboard msg="Welcome to Your Vue.js App"/>
    </template>
    
    <script>
    import Dashboard from './components/Dashboard.vue'
    
    export default {
      name: 'App',
      components: {
        Dashboard
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

<template>
      <div>
        <button @click="visible = !visible">{
       { visible===true?'隐藏':'显示'}}</button>
        <HelloWorld v-show="visible" msg="Welcome to Your Vue.js App"/>
      </div>
    
    </template>
    
    <script>
      import HelloWorld from './HelloWorld.vue'
    
      export default {
        name: "Dashboard",
        components: {
          HelloWorld
        },
        data() {
          return {
            visible:false
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>

### **截图展示** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 3][]

## **题二** ##

handleLogin() {
          console.log('login submit')
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              this.loading = true
              this.$store.dispatch('user/login', this.loginForm)
                .then(() => {
                  this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                  this.loading = false
                })
                .catch(() => {
                  this.loading = false
                })
            } else {
              console.log('error submit!!')
              return false
            }
          })
        },

### **截图展示** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 5][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 6][]

# **心得体会** #

**1. ** **熟悉****Vue****开发工具。**

**2. ** **学会安装****Vue-CLI****脚手架工具。**

**3. ** **学会使用****Vue-CLI****脚手架工具在自己的电脑上建立项目，并运行调试。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]: /images/20221022/b30e30b1b00a44bbbbc6bbb342e60b70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/316df086c3dc4499b9fd8f88ca582ea8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/161952b04d5e41fa9b3551a5d3ad017d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/6f99679e6c5c4264a6f2b0a7ff74751a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/ecdf5a013b6e4fd88c77e37a575b2d83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210414193639621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/cba0f492008746f98848cc9c29d57688.png