专栏首页郭少华Vue实战开发

Vue实战开发

Vue-cli搭建开发环境

1.安装vue-cli脚手架

mpm install vue-cli -g

2.初始化项目

vue init webpack AwesomePos

3.修改index.html首页

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>服务申报2.0</title>
    <style>
      html,body,#app{
        height:100%;
        padding:0;
        margin:0;
        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4.新建Fwsb组件,这个相当于程序员的入口文件。在src/components/目录下新建Fwsb.vue文件。文件内容

<template>
    <div class="Fwsb">
        Hello Fwsb
    </div>
</template>
<script>
export default {
    name:'Fwsb'
}
</script>
<style>
</style>

5.修改路由文件,项目根目录/src/router/index.js,让入口文件变成Fwsb组件。

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Fwsb',
      component: Fwsb
    }
  ]
})

搞定项目图标Iconfont

  • 进入网站:Iconfont网址:http://www.iconfont.cn
  • 点击网站上方的“官方图标库”,选择自己喜欢的图标。在这里我选择天猫的图标库。
  • 选择好自己喜欢的图标,你可以有两个选择,下载代码 和 添加至项目。
  • 我们这两选择添加至项目,然后新建项目,并输入名称。
  • 项目添加好后,会自动给我们转入到我们项目库中。点击查看在线链接。
  • 生产css引入的代码,生成后就可以在项目首页index.html引入了。
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_681056_c2x5ok2j659ltyb9.css">

图标顺利引入到项目中,已经可以使用它们了,在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴,也可以自己写代码。

   <i class="iconfont icon-bangbangtang "></i>

ElementUI

安装

npm install element-ui --save

引入项目

在main.js写入以下内容

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' 
Vue.use(ElementUI)

Axios从远程读取数据

安装axios

npm install axios --save

引入axios

import axios from 'axios'

post 请求

var paramsJson = {"access_token": this.token}; 
this.$ajax.post('/newfwsb/MenuConfigController/queryMenuconfigFirst',paramsJson).then((response)=>{
          this.menuConfigs = response.data.content.menuConfigs;
 })

get 请求

var paramsJson ={"access_token":this.token,"page":this.page,"size":this.size};
this.$ajax.get('/newfwsb/RepairMesController/repairMesRepairStatusList',{params:paramsJson}).then((response)=>{
  this.repairMesList = response.data.content.RepairMesSerPage.content       
  console.log(JSON.stringify(response.data.content.RepairMesSerPage.content
));

跨域解决

proxyTable: {
        '/newfwsb': {
          target: 'http://127.0.0.1:8080/newfwsb/api',
          changeOrigin: true,
          pathRewrite: {
              '^/newfwsb': ''
          }
      }

axios post请求问题

function transformRequest (data) {
  let ret = ''
  for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
}


axios.interceptors.request.use(function (config) {
  // config.headers['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
  // config.data=transformRequest(config.data);
  if(config.type!='payload'){
      config.headers['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
      config.data=transformRequest(config.data);
  }

  return config;
}, function (err) {
  return Promise.reject(err);
});

懒加载

    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>require(['@/components/HelloWorld.vue'],resolve)
    },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring boot之JSON(二)

    楠楠
  • (Vue全家桶)Vue-vuex

    vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。

    楠楠
  • (第一季)Vue2.0-内部指令

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

    楠楠
  • PHP完成微信小程序在线支付功能

    沈唁
  • 再说this

    看到许多文章在介绍 JavaScript 的 this 时都会假设你学过某种面向对象的编程语言,比如 Java、C++ 或 Python 等。但这篇文章面向的读...

    grain先森
  • xml与java对象的快速互转

    做流程图的项目时,新的流程定义为xml的,需要对xml与java对象进行互转 查了一下activiti的转换xml方式,发现转换太麻烦了,需要一步步的解析xm...

    星痕
  • 深度解析JavaScript的this关键字

    这篇文章通过简单的术语和一个真实的例子解释了 this 是什么以及为什么说它很有用。

    Fundebug
  • Vue 绑定简单分析实现

    使用js es6 中 Object.defineProperty为我们自己定义的VM创建示例。同时这个方法通过提供了set.get方法的触发我们的监听事件。

    deep_sadness
  • VUE+WebPack游戏设计:实现外星人攻击冲击波

    望月从良
  • 突然顿悟的Javascript中的this

      一直对Javascript中的this都有一种似是而非的感觉,今天突然感觉豁然开朗,特此记录一下。 咱们先看个栗子: <!DOCTYPE html> <ht...

    hbbliyong

扫码关注云+社区

领取腾讯云代金券