elementui 搭建布局页面路由_Luffy - 前台搭建

 vue create luffycity

<template>
  <div id="app">
    <div id="nav">
      <!-- 路由跳转到根组件 -->  
      <router-link to="/">Home</router-link> |
      <!-- 路由跳转到about组件 -->    
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
 
<style>
<!-- 这里编写CSS代码 -->
...
</style>
 
<script>
// 这里编写JS代码
...
</script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'    // 导入Home组件
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',        // 设置跟路由路径：/
    name: 'Home',
    component: Home    // 跟路由组件为Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/* 声明全局样式和项目的初始化样式 */
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; /* 合并边框 */
}

 // 使用 global.css
import './assets/css/global.css'

npm install axios

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

npm install vue-cookies

 // vue-cookie 配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies

cnpm install element-ui

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

npm install jquery

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

npm install --save popper.js

 npm install bootstrap

// Bootstrap 配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' 

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

 // 配置全局自定义设置
import settings from './assets/js/settings'
Vue.prototype.$settings = settings;

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
import './assets/css/global.css'
 
import settings from './assets/js/settings'
 
import axios from 'axios'
 
import cookies from 'vue-cookies'
 
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
 
Vue.prototype.$settings = settings
Vue.prototype.$cookies = cookies
Vue.prototype.$axios = axios
 
Vue.config.productionTip = false
 
Vue.use(ElementUI);
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')