前台创建及配置

创建项目

vue create luffycity

使用pycharm打开

文件中的东西删除成以下样式

　　APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

　　HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
  }
}
</script>

　　router下的index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

elementui ,bootstrap,jquery,axios配置

　　下载

# axios
cnpm install axios  -S

#elementui
cnpm install element-ui -S

# bootstrap和jq
cnpm install jquery -S
cnpm install bootstrap@3 -S

　　文件配置

　　　　在main.js文件中进行配置

# axios
import axios from 'axios'
Vue.prototype.$axios = axios;

#elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

# bootstrap
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

 　　vue.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

 全局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; /* 合并边框 */
}

　　main.js

// 把自己定义的global.css 引入
import './assets/css/global.css'

配置文件配置

　　assets/js/settings.js

export default {
    base_url: "http://127.0.0.1:8000"
}

　　main.js 

// 导入自定义配置
import settings from './assets/js/settings'
Vue.prototype.$settings = settings;