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

    }

  })

}