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 条评论
登录 后参与评论

相关文章

来自专栏静默虚空的博客

Babel 入门指南

Babel 入门指南 ​⚠ 注意: Babel 可以与很多构建工具(如 Browserify、Grunt、Gulp 等)进行集成。由于本教程选择 Webpa...

23450
来自专栏魏琼东

一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-在UI中应用DataUIMapper组件

系列回顾       WinForm篇我用了一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实例一个模块(商品字典)和一步一...

22390
来自专栏全沾开发(huā)

如何从0开发一个Atom组件

如何从0开发一个Atom组件 最近用Atom写博客比较多,然后发现一个很严重的问题。。 没有一个我想要的上传图片的方式,比如某乎上边...

37650
来自专栏网络

玩转 React 服务器端渲染

【编者按】React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToStri...

26580
来自专栏闪电gogogo的专栏

sublime学习笔记

1 sublime的几个优点 1.操作简单上手快 2.支持多点编辑:ctrl + 光标 3.基于Package Control强大的包管理功能 4.闪电一样的查...

32360
来自专栏老付的网络博客

推荐一个jekyll博客模板

本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢...

37520
来自专栏前端说吧

【本周主题】JavaScript单线程与异步

9510
来自专栏全沾开发(huā)

Chrome设置断点的各种姿势

Chrome设置断点的各种姿势 最近在翻看Chrome devtools的文档,刚看到了关于断点调试这里,感觉发现了新大陆-。- 本...

2.1K80
来自专栏Samego开发资源

ThinkPHP开发常用信息记录

17630
来自专栏知晓程序

开发 | 天天用小程序页面跳转接口,但你真的了解它们吗?

今天,知晓程序(微信号 zxcx0101)就来为你详细解析,小程序中有关页面跳转的 4 个接口,帮助你更有效地利用小程序的 5 层页面层级限制。

16430

扫码关注云+社区

领取腾讯云代金券