luffy前端

目录

• 一 前端项目创建，调整目录
• 二 前端配置

一 前端项目创建，调整目录

# 创建前端项目 vue2 
前提：在目标目录新建luffy文件夹
cd python project
vue create luffy_city
创建成功，用pycharm打开

二 前端配置

# 安装第三方
	-axios
    -elementui
    -vue-cookies
   

# 安装
	cnpm install -S axios
    cnpm install -S vue-cookies
    cnpm i element-ui@2.9.2 -S
    
    
 # main.js中配置
    // elementui配置
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

    // axios配置
    import axios from "axios";
    Vue.prototype.$axios=axios

    // vue-cookies配置
    import cookies from 'vue-cookies'
    Vue.prototype.$cookies=cookies
	
    
# 写一个全局配置settings.js 文件
	# assets--> js--> settings.js
    export default {
        BASE_URL: 'http://127.0.0.1:8000/api/v1/'
    }
    # main.js中
    // 配置全局自定义设置：后端路由
    import settings from '@/assets/js/settings'
    Vue.prototype.$settings = settings
    
    # 以后再任意组件中
    this.$settings.BASE_URL
    
    
    
# 全局样式
	html的标签a ul li ，都会有默认样式，正常的前端，都会去掉所有标签的默认样式， 自己写样式
    
    #1 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; /* 合并边框 */
    }
    
    # 2 main.js 配置，样式全局生效
    // 使用全局样式，取出所有标签默认样式
	import '@/assets/css/global.css'