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)
    },

最后编辑于：2018.06.05 11:10:31