7 luffy前台项目创建配置

2022-02-17 23:32:45 阅读：169 来源： 互联网

标签：axios settings -- 创建 js vue 前台 luffy css

# 1 创建项目（找到目标目录创建项目D:\Virtualenvs）
 vue create luffy_front
    
# 2 使用pycharm打开，配置可以使用点击启动
#配置npm run server

# 3 删除App.vue中的代码
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

# 4 删除 Helloworld.vue 和About.vue
# 5 修改  router--index.js，删掉 About的路径

# 6 配置全局css--》assets--》css--》global.css
/* 声明全局样式和项目的初始化样式 */
/*
清除掉所有标签的默认样式
 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

# 7 在main.js中引入
// 引入写的全局css global.css
import './assets/css/global.css'

# 8 安装axios
npm install axios
# 9 在main.js中引入
import axios from "axios";
// 原型,把axios放到Vue的原型中
// 以后在vue对象中直接通过  this.$axios 拿到的就是axios
Vue.prototype.$axios=axios

# 10 编写配置文件    assets---》js---》settings.js
export default {
    base_url:'http://127.0.0.1:8000'  // 后端地址
}

# 11 在main.js中配置
import settings from "./assets/js/settings";
Vue.prototype.$settings=settings


# 12 以后在组件中使用
     created() {
            this.$axios.get(this.$settings.base_url + '/home/test2').then(res => {
                console.log(res.data)
            })
 
        }

标签：axios,settings,--,创建,js,vue,前台,luffy,css
来源： https://www.cnblogs.com/Haier123/p/15906854.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

7 luffy前台项目创建配置