項目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

vue項目建立

環境

1.傻瓜式安裝node: 
官網下載：https://nodejs.org/zh-cn/
​
2.安裝cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
​
3.安裝vue最新腳手架: 
>: cnpm install -g @vue/cli
​
注：若是二、3步報錯，清除緩存後從新走二、3步
>: npm cache clean --force

建立項目

'''
1.切到項目文件夾下
>: cd Desktop\luffy
2.在項目文件夾下建立vue項目
>: vue create luffycity
3.按下面插圖完成建立

'''

 

 

重構項目目錄

"""
├── luffycity
    ├── public/                      # 項目共有資源
        ├── favicon.ico                # 站點圖標
        └── index.html                # 主頁
    ├── src/                          # 項目主應用，開發時的代碼保存
        ├── assets/                  # 前臺靜態資源總目錄
            ├── css/                # 自定義css樣式
                └── global.css        # 自定義全局樣式
            ├── js/                    # 自定義js樣式
                └── settings.js        # 自定義配置文件
            └── img/                # 前臺圖片資源
        ├── components/                # 小組件目錄
        ├── views/                  # 頁面組件目錄
        ├── App.vue                    # 根路由
        ├── main.js                    # 入口腳本文件
        ├── router            
            └── index.js            # 路由腳本文件
        store                
            └── index.js            # 倉庫腳本文件
    ├── vue.config.js                # 項目配置文件
    └── *.*                            # 其餘配置文件
"""

 

文件修訂：目錄中非配置文件的多餘文件能夠移除

App.vue

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

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

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

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});

export default router

views/Home.vue

<template>
    <div class="home">
    </div>
</template>

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

 

全局配置：全局樣式、配置文件

global.css

/* 聲明全局樣式和項目的初始化樣式 */
body, h1, h2, h3, h4, 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; /* 合併邊框 */
}

settings.js

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

main.js

// 配置全局樣式
import '@/assets/css/global.css'

// 配置全局自定義設置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在全部須要與後臺交互的組件中：this.$settings.base_url + '再拼接具體後臺路由'

 

axios先後臺交互

安裝：前端項目目錄下的終端

>: cnpm install axios

 

配置：main.js

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

cookies操做

安裝：前端項目目錄下的終端

>: cnpm install vue-cookies

 

配置：main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies; 

element-ui頁面組件框架

安裝：前端項目目錄下的終端

>: cnpm install element-ui

 

配置：main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
​
// bootstrap+jq配置：cnpm install jquery、cnpm install bootstrap@3
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' 

bootstrap頁面組件框架

安裝：前端項目目錄下的終端

>: cnpm install jquery
>: cnpm install bootstrap@3

 

配置jquery：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"]
            })
        ]
    }
};

 

配置bootstrap：main.js

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