zoukankan      html  css  js  c++  java
  • 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;
     100%;
        height: 100%;
        /* position: fixed; */
        left: 0;
        z-index: 999;
        overflow:scroll
    }
    html, body{
      height: 100%;
       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
        }
      })
    }
     
     
  • 相关阅读:
    把手机用户的身份验证简化到极致 – IEMI
    WIFI 功放芯片确定功率大小
    告别镜像端口:完成流量监控全功略
    windows 2003 server 配置为NTP服务器
    【转】VIM 多文件跳转
    【转】在Linux下FQ的看过来
    【转】VIM自动完成
    【转】VIM下的跳转练习
    【转】vim 窗口调整
    【转】Cscope的使用(领略Vim + Cscope的强大魅力)
  • 原文地址:https://www.cnblogs.com/wd163/p/12937755.html
Copyright © 2011-2022 走看看