二、前端项目案例

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 编写代码