Vue实战开发
Vue-cli搭建开发环境
1.安装vue-cli脚手架
mpm install vue-cli -g2.初始化项目
vue init webpack AwesomePos3.修改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.05.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录