Vue

Vue項目前的準備

1.安裝node.js

2.安裝淘寶鏡像,不裝也能夠,就是可能以後的下載會很慢

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝vue.js

cnpm install vue

4.安裝vue/cli腳手架

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init //與2版本橋聯
//安裝鏡像了就用cnpm沒裝就使用npm

建立項目

vue init webpack my-project  //使用前先cd 到項目文件夾

安裝elment-ui

cnpm i element-ui -S

配置element-ui

在 main.js 中寫入如下內容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

引入全局css

在static中創建全局css文件

在main.js中引入

import '../static/common.css'

一個簡單的vue項目的路由配置

main.js

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import $ from 'jquery'
import '../static/common.css'

Vue.config.productionTip = false;


Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

main.js

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home/Home'
import Course from '@/components/Course/Course'
import EasyCourse from '@/components/EasyCourse/EasyCourse'
import AcademicCourse from '@/components/AcademicCourse/AcademicCourse'
import QuestionBank from '@/components/QuestionBank/QuestionBank'
import PublishCourse from '@/components/PublishCourse/PublishCourse'
import TeachMaterials from '@/components/TeachMaterials/TeachMaterials'

Vue.use(Router);

export default new Router({
    mode: "history",  //  幹掉地址欄裏邊的#號鍵
    routes:
        [
            {
                path: "/",
                redirect: "/home"

            },
            {
                path: "/home",
                name: "Home",
                component: Home
            },
            {
                path: "/course",
                name: "Course",
                component: Course,

            },
            {
                path: "/easy_course",
                name: "EasyCourse",
                component: EasyCourse,

            },
            {
                path: "/academic_course",
                name: "AcademicCourse",
                component: AcademicCourse,

            },
            {
                path: "/question_bank",
                name: "QuestionBank",
                component: QuestionBank,

            },
            {
                path: "/publish_course",
                name: "PublishCourse",
                component: PublishCourse,

            },
            {
                path: "/teach_materials",
                name: "TeachMaterials",
                component: TeachMaterials,

            },
         
        ]
})

index.js

App.vue

<template>
    <div id="app">

        <el-container>
            <el-header>
                <router-link :to='{name:"Home"}'>首頁</router-link>
                <router-link :to='{name:"Course"}'>免費課程</router-link>
                <router-link :to='{name:"EasyCourse"}'>輕課</router-link>
                <router-link :to='{name:"AcademicCourse"}'>學位課程</router-link>
                <router-link :to='{name:"QuestionBank"}'>智能題庫</router-link>
                <router-link :to='{name:"PublishCourse"}'>公開課</router-link>
                <router-link :to='{name:"TeachMaterials"}'>內部教材</router-link>
                <router-link :to='{name:"OldBoy"}'>老男孩教育</router-link>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>


    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {}
        },
        components: {//局部註冊組件這裏，可能會定義多個組件，因此component這個單詞加上「s」

        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        border: 0;
    }

    a {
        text-decoration: none;
        padding: 0 10px;
    }

    .el-header, .el-footer {
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        /*background-color: #f3f3f3;*/
        color: #333;
        text-align: center;
        line-height: 160px;
        margin: 0 auto;
        width: 1200px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

</style>

App.vue

Home.vue

<template>
    <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item,index) in img" :key="index">
            <img :src="item" alt="">
        </el-carousel-item>
    </el-carousel>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {
                img:[
                    "http://5b0988e595225.cdn.sohucs.com/images/20180708/d5041473bca941ff8667d80c126b87d1.jpeg",
                    "http://5b0988e595225.cdn.sohucs.com/images/20171222/1d775fa8054141e4979d5348302981e5.jpeg",
                    "http://b-ssl.duitang.com/uploads/item/201510/23/20151023092933_FuAXG.jpeg",
                    "http://b-ssl.duitang.com/uploads/item/201312/27/20131227233111_uaCjC.jpeg",


                ]
            }
        }
    }
</script>

<style scoped>

    .el-carousel{
        height: 500px;
    }
    img{
        width: 1200px;
    }

</style>

Home.vue

目錄結構

 

 index.js的路由配置時

mode: "history",  //  幹掉地址欄裏邊的#號鍵
linkActiveClass:'is-active', //在路由的構造選項裏配置默認類名爲is-active用於當前訪問的地址對應的按鈕高亮,此處的"is-active"類應該爲全局css樣式