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
在build文件夾下的webpack.base.conf.js的rules標簽下添加配置。
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }
4.3 如何使用
在頁面代碼style標簽中把lang設置成scss即可:
<style lang="scss"></style>
axios是一個基於Promise用於瀏覽器和Node.js的HTTP客戶端,我們后續需要用來發送HTTP請求,接下來講解 axios的安裝和使用。
5.1 安裝依賴
yarn add axios
<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