vue-cli快速搭建项目的几个文件(一)
===========app.vue文件=============
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
watch:{
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
body{
margin:0px auto;
padding:0px;
width: 100%;
height: 100%;
/* position: fixed; */
left: 0;
z-index: 999;
overflow:scroll
}
html, body{
height: 100%;
width: 100%;
}
html,body{
height: 100%;
background: #ececec;
}
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, c{ border:none; }
img{border: none;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol ,li{ list-style:none; }
a { color:#666; text-decoration:none; }
em{
font-style: normal;
}
</style>
=========main.js文件==========
import Vue from 'vue'
import App from './App.vue'
import router from './router/router' （安装路由）
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
========copy.文件===========
copy.文件
<template>
<div class="">
新建了一个vue页面
</div>
</template>
<script>
export default {
name: "",
components:{
},
data(){
return{
}
},
created:function(){
},
methods:{
},
mounted:function(){}
}
</script>
<style lang='less' scoped>
</style>
==========router.js文件============
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../pages/index.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/index'
},
{
path: '/index',
name: 'index',
component: Index,
},
]
const router = new VueRouter({
mode: 'hash',
routes
})
export default router
========vue.config.js文件=========
const webpack = require('webpack')
module.exports = {
publicPath:'./', // 根目录地址
lintOnSave: false,
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery" (安装jq后)
})
],
},
css:{ sourceMap: true }//谷歌浏览器显示css行数
}
==========request.js文件 （安装axios后）==========
import axios from 'axios'
export function request(config) {
const instance = axios.create({
// baseURL: "http://192.168.x.x:8087",
})
instance.interceptors.request.use(config => {
if(config.url ==='/api/upload'){
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
return config
}, error => {
console.log(error)
})
instance.interceptors.response.use(res => {
return res.data
}, error => {
console.log(error)
})
return instance(config)
}
===========请求方法:============
import {request} from "../request";
export function xxxx(obj) {
return request({
url:'/api/xxx/xxx',
params:{
'xx':obj.data,
'xx':obj.id
}
})
}
