二、前端項目案例


1.導入項目

打開Visual Studio Code,選擇File->add Folder to Workspace,導入我們的項目。

2.安裝Element

2.1 安裝依賴

可參考官網:https://element.eleme.cn/#/zh-CN/component/installation

推薦用yarn命令:yarn add element-ui

2.2 導入項目

根據安裝指南,在main.js中引入Element:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)//注冊使用Element

具體使用結合官網,復制粘貼即可使用。

這里需要了解vue-cli腳手架目錄的各項具體功能:https://www.cnblogs.com/hongdiandian/p/8311645.html

3.頁面路由

3.1 添加頁面

把components改名為views,並在其目錄下添加3個頁面:Login.vue,Home.vue,404.vue。如Login.vue:

<template>
  <div class="page">
    <h2>Login Page</h2>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

template 標簽用法:https://blog.csdn.net/u010510187/article/details/100356624

export default用法:https://www.cnblogs.com/nx520zj/p/9617689.html

3.2 配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/login',
      name: 'Login',
      component: Login
    }, {
      path: '/404',
      name: 'notFound',
      component: NotFound
    }
  ]
})

path:填寫具體路徑

路由各項屬性作用可參考:http://doc.liangxinghua.com/vue-family/3.10.html

4.安裝SCSS

4.1 安裝依賴

因為后續會用到SCSS編寫頁面樣式,所以安裝SCSS:

yarn add sass-loader node-sass -d
4.2 添加配置

在build文件夾下的webpack.base.conf.js的rules標簽下添加配置。

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }

4.3 如何使用

在頁面代碼style標簽中把lang設置成scss即可:

<style lang="scss"></style>
5.安裝axios

axios是一個基於Promise用於瀏覽器和Node.js的HTTP客戶端,我們后續需要用來發送HTTP請求,接下來講解 axios的安裝和使用。

5.1 安裝依賴

yarn add axios
5.2 編寫代碼
<template>
  <div class="page">
    <h2>Home Page</h2>
    <el-button type="primary" @click="testAxios()">測試Axios調用</el-button>
    <el-button type="primary" @click="getUser()">獲取用戶信息</el-button>
    <el-button type="primary" @click="getMenu()">獲取菜單信息</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
  name: 'Home',
  methods: {
    testAxios() {
      axios.get('http://localhost:8080').then(res => { alert(res.data) })
    },
    getUser() {
      axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })
    },
    getMenu() {
      axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })
    }
  }
}
</script>

6.安裝Mock.js

為了模擬后台接口提供頁面需要的數據,引入Mock.js為我們提供模擬數據,而不用依賴於后台接口的完成。

6.1 安裝依賴

yarn add mockjs -d
6.2 編寫代碼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM