使用Vue构建前端页面

时间：2024-03-20 07:20:46

起步

使用vue-cli构建初始应用，这里使用了webpack这个模板,这会产生一个比较完整的项目结构
具体文件目录的作用可以参考博客 vue-cli项目结构详解

vue init webpack project_name
npm install
npm run dev

然后我们就可以在localhost:8080 看到项目的初始页面
使用Vue构建前端页面

webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。
它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。详细介绍可参考这个博客

我们刚刚创建的项目已经包含了webpack的配置。

引入iview

在项目中，我们使用了UI库iview便于快速开发
安装

npm install iview --save

一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

路由

对于大多数单页面应用，都推荐使用官方支持的 vue-router库 。更多细节可以看 vue-router文档 。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
import show from '@/components/show'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/show',
      name: 'ShowSth',
      component: show
    },
    {
      path: '/',
      redirect: '/index'
    }
  ]
})

我们看到地址栏会有#号，为什么会出现这个符号，就需要了解vue-router 的两种模式 hash 和 history。参考博客

  • hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
  • history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

发起请求

有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios则是其中非常流行的一种。
官方示例

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

为了方便使用，我封装了常用的get和post请求方法，单独写在了libs\http.js中。

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:5656'

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch (url, data) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params: data})
      .then(response => {
        resolve(response);
      }).catch(err => {
      reject(err);
    });
  });
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post (url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err);
      });
  });
}

调用

let res = await fetch(url，params);

最终效果

使用Vue构建前端页面

代码地址

Github

相关文章