1、vue環境和腳手架

# 1.傻瓜式安裝node: 
官網下載：https://nodejs.org/zh-cn/

# 2.安裝cnpm: （相當於python國內源）
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 3.安裝vue最新腳手架: （以後cnpm代替npm命令，快速安裝）
cnpm install -g @vue/cli

# 注：如果2、3步報錯，清除快取後重新走2、3步
npm cache clean --force

2、建立專案

命令建立

# 前提：在目標目錄新建luffy資料夾
cd 建立的luffy資料夾
vue create luffycity
 

設定啟動按鈕

3、刪除多於的檔案

Vue-CLI是一個方便我們編寫前臺專案的框架，有他自己的格式

所以我們需要改造這個框架，適用於我們的專案

第一步就是刪除我們不需要的一些檔案，只保留最純淨的部分

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
    },
    {
        path: '/home',
        redirect: '/',
    },
];

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

export 
 
default router

Home.vue

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

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

4、重構專案目錄

├── 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                # 專案配置檔案
    └── *.*                            # 其他配置檔案

5、axios、elementui、bootstrap、jquery基本配置

axios

# 下載axios模組
cnpm install axios -S

# main.js中匯入
import axios from 'axios'
Vue.prototype.$axios = axios;

elementui

# 下載elementui模組
cnpm install element-ui -S

# main.js中匯入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

bootstrap和jquery

# 下載bootstrap和jquery庫
cnpm install jquery -S
cnpm install bootstrap@3 -S

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

# main.js中匯入
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

6、全域性css樣式配置

在assets/css/global.css中編寫自己的全域性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中匯入自己的全域性css樣式

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

7、開發階段基本網址配置

新建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;