zoukankan      html  css  js  c++  java
  • Vue创建项目入门

    Vue创建项目入门

    步骤

    • 修改main.js,引入axios和element-ui
    • 自己创建vue.config.js
    • npm i element-ui -S
    • npm i axios -S

    main.js

    import Vue from 'vue'
    import App from './App.vue'
    import './plugins/element.js'
    
    import axios from 'axios'
     //将axios挂载在Vue扩展上
     Vue.prototype.$http=axios
     //在其他地方使用只需使用 this.$http来代替axios;
     //配置baseUrl
    axios.defaults.baseURL = '/api'
    
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    

    vue.config.js

    module.exports = {
        devServer: {
     	    // 设置主机地址
            host: 'localhost',
            // 设置默认端口
            port: 51001,
            // 设置代理
            // proxy: {
            //     'douban': {
            //         // 目标 API 地址
            //         target: 'http://douban',
            //         // 如果要代理 websockets
            //         ws: true,
            //         // 将主机标头的原点更改为目标URL
            //         changeOrigin: false
            //     }
            // }
            proxy: {
                '/api': {
                  target: 'http://localhost:52001/api',
                  changeOrigin: true,
                  pathRewrite: {
                    '^/api': ''
                  }
                }
              }
        }
    }
    

    编写页面请求后台接口

    <template>
    <div>
      <div @click="queryStudentList()">学成</div>
    </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data() {
          return {}
        },
        methods: {
          queryStudentList(){
            this.$http("/user/list")
            .then(function(res){
              console.log(res);
            })
          }
        }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style>
    </style>
    
  • 相关阅读:
    Buffer -nodejs
    Tip提示框另类写法
    SASS入门
    界面设计必须要权衡的三个要素
    如何快速出稿一个优秀APP的构图
    如何画好一套线性图标
    Ui培训之如何设计极简三色图标
    移动APP设计国外资源总汇
    移动界面UI颜色设计
    APP专业视觉设计基础标准要求
  • 原文地址:https://www.cnblogs.com/mozq/p/12316036.html
Copyright © 2011-2022 走看看