Vue 编写js文件并引用

创建Js文件

在这里插入图片描述

import Axios from 'axios';

export function userLogin(urlBase,userId, pwd) {
    const url = urlBase+"login";
    Axios.post(url, {
        "pwd": userId,
        "userId": pwd
    }).then((response) => {
        this.msglist = response.data.result;
        console.log("请求到的数据:" + response);
        return response;
    }).catch((error) => {
        console.log(error);
        return null;
    })
}

引用

注意引用路径

<script>
   import {userLogin} from '@/manager/net/NetUtil'
    import AppConstant from '@/AppConstant'
    export default {
        name: "Login",
        methods: {
            handleSubmit(loginData) {
                const resopnse = userLogin(AppConstant.serverBase,loginData.name, loginData.pwd);
            }

        }
    }
 </script>

AppConstant是用于保存全局常量

<script>
   export default {
       name: "Appconstant",
       serverBase //注意了这里必须要导出
   }
   const serverBase = 'http://localhost:8099/';
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,我是一个自然语言处理模型,无法直接提供代码。不过,你可以参考以下步骤来使用 Vue.js 开发小米商城: 1. 安装 Vue.js 首先,你需要安装 Vue.js。你可以通过以下命令来安装 Vue.js: ``` npm install vue ``` 2. 创建 Vue 实例 在你的 HTML 文件中引入 Vue.js,并且创建一个 Vue 实例,例如: ``` <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 3. 组件化开发 使用 Vue.js 可以将应用程序拆分成多个组件,每个组件代表一个独立的功能模块。你可以使用 Vue 的组件化开发来构建小米商城,例如: ``` Vue.component('product', { props: ['name', 'price', 'image'], template: ` <div class="product"> <img :src="image" /> <h3>{{ name }}</h3> <p>{{ price }}</p> </div> ` }); ``` 4. 数据绑定 Vue.js 的最大特色就是数据绑定。你可以使用 Vue.js 来实现数据的双向绑定,例如: ``` <div id="app"> <input v-model="message" /> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 5. 路由管理 你可以使用 Vue.js 的路由管理来实现小米商城的页面跳转,例如: ``` const routes = [ { path: '/', component: Home }, { path: '/products', component: Products }, { path: '/cart', component: Cart } ]; const router = new VueRouter({ routes }); const app = new Vue({ router }).$mount('#app'); ``` 以上是简单的介绍,具体实现还需要根据实际需求进行开发。希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值