實驗目標

熟悉Vue開發工具，學會安裝Vue-CLI腳手架工具。

學會使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試。

實驗內容

使用Vue-CLI腳手架工具，用命令的方法搭建一個Web項目，項目名稱為myvue01，在項目中創建一個頁面（修改為首頁），單擊按鈕，在Div中顯示Hello World！。

使用Vue-CLI腳手架GUI工具，創建一個Web項目，項目名稱為myvue02，編寫一個簡單的登錄頁面（修改為首頁），點擊登錄按鈕，可提示信息（或跳轉到新的歡迎頁面）。

本題可以選擇以下方法中的一種：

1）.可以做得簡單一點，只是搭建出效果。

2）.使用模擬數據進行用戶名和密碼驗證。

實驗詳細過程和步驟

題一

1、搭建項目myvue01

2、項目目錄

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>

截圖展示

題二

handleLogin() {console.log('login submit')this.$refs.loginForm.validate(valid => {if (valid) {this.loading = truethis.$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}})},

截圖展示

心得體會

1.? 熟悉Vue開發工具。

2.? 學會安裝Vue-CLI腳手架工具。

3.? 學會使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試。

?

?

總結

以上是生活随笔為你收集整理的《移动应用开发》实验报告——Vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。