概述

前端三要素

HTML（結構) ：超文本標記語言（Hyper Text Markup Language) ，決定網頁的結構和內容
CSS（表現) ：層疊樣式表（Cascading Style sheets) ，設定網頁的表現樣式
JavaScript （行為) ：是一種弱型別腳本語言，其源代碼不需經過編譯，而是由瀏覽器解釋運行，用于控制網頁的行為

JavaScript框架

jQuery：大家熟知的JavaScript框架，優點是簡化了DOM操作，缺點是DOM操作太頻繁，影響前端性能；在前端眼里使用它僅僅是為了兼容IE6、7、8;

Angular：Google收購的前端框架，由一群Java程式員開發，其特點是將后臺的MVC模式搬到了前端并增加了模塊化開發的理念，與微軟合作，采用TypeScript語法開發；對后臺程式員友好，對前端程式員不太友好；最大的缺點是版本迭代不合理（如: 1代-> 2代，除了名字，基本就是兩個東西；截止發表博客時已推出了Angular6）

React：Facebook出品，一款高性能的JS前端框架；特點是提出了新概念【虛擬DOM】用于減少真實DOM操作，在記憶體中模擬DOM操作，有效的提升了前端渲染效率；缺點是使用復雜，因為需要額外學習一門【JSX】語言;

Vue：一款漸進式JavaScript框架，所謂漸進式就是逐步實作新特性的意思，如實作模塊化開發、路由、狀態管理等新特性，其特點是綜合了Angular（模塊化）和React（虛擬DOM）的優點；

Axios：前端通信框架；因為Vue 的邊界很明確，就是為了處理DOM，所以并不具備通信能力，此時就需要額外使用一個通信框架與服務器互動；當然也可以直接選擇使用jQuery提供的AJAX通信功能；

前端三大框架：Angular、React、Vue

UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUl，iview， ice：餓了么出品，基于Vue的UI框架
Bootstrap：Twitter推出的一個用于前端開發的開源工具包
AmazeUl：又叫"妹子U1" ,一款HTML5跨屏前端框架

Vue.js

iView
iview是一個強大的基于Vue的UI庫，有很多實用的基礎組件比elementui的組件更豐富，主要服務于PC界面的中后臺產品，使用單檔案的Vue組件化開發模式基于npm + webpack +babel開發，支持ES2015高質量、功能豐富友好的API ，自由靈活地使用空間，

ElementUI
Element是餓了么前端開源維護的Vue UI組件庫，組件齊全，基本涵蓋后臺所需的所有組件，檔案講解詳細，例子也很豐富，主要用于開發PC端的頁面，是一個質量比較高的Vue UI組件庫，

了解前后分離的演變史

MVC時代

為了降低開發的復雜度，以后端為出發點，比如：Struts、Spring MVC等框架的使用，就是后端的MVC時代；
以SpringMVC流程為例，

發起請求到前端控制器(Dispatcher Servlet)
前端控制器請求HandlerMapping查找Handler，可以根據xml配置、注解進行查找
處理器映射器HandlerMapping向前端控制器回傳Handler
前端控制器呼叫處理器配接器去執行Handler
處理器配接器去執行Handler
Handler執行完成給配接器回傳ModelAndView
處理器配接器向前端控制器回傳ModelAndView，ModelAndView是SpringMvc框架的一個底層物件，包括Model和View
前端控制器請求視圖決議器去進行視圖決議，根據邏輯視圖名決議成真正的視圖(JSP)
視圖決議器向前端控制器回傳View
前端控制器進行視圖渲染，視圖渲染將模型資料(在ModelAndView物件中)填充到request域
前端控制器向用戶回應結果

基于AJAX帶來的SPA時代

時間回到2005年A OAX(Asynchronous JavaScript And XML，異步JavaScript和XML，老技術新用法)被正式提出并開始使用CDN作為靜態資源存盤，于是出現了JavaScript王者歸來(在這之前JS都是用來在網頁上貼狗皮膏藥廣告的) 的SPA(Single Page Application) 單頁面應用時代，

前端為主的MV*時代

MVC(同步通信為主) ：Model、View、Controller
MVP(異步通信為主) ：Model、View、Presenter
MVVM(異步通信為主)：Model、View、View Model為了降低前端開發復雜度，涌現了大量的前端框架，比如：Angular JS、React、Vue.js、Ember JS等，這些框架總的原則是先按型別分層，比如Templates、Controllers、Models，然后再在層內做切分，如下圖：

第一個Vue程式

什么是MVVM

MVVM源自于經典的MVC（Model-View-Controller）模式，MVVM的核心是ViewModel層，負責轉換Model中的資料物件來讓資料變得更容易管理和使用，

該層向上與視圖層進行雙向資料系結
向下與Model層通過介面請求進行資料互動

為什么要使用MVVM

低耦合：視圖（View）可以獨立于Model變化和修改，一個ViewModel可以系結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變，
可復用：你可以把一些視圖邏輯放在一個ViewModel里面，讓很多View重用這段視圖邏輯，
獨立開發：開發人員可以專注于業務邏輯和資料的開發（ViewMode），設計人員可以專注于頁面設計，
可測驗：界面素來是比較難以測驗的，而現在測驗可以針對ViewModel來寫，

View

View是視圖層，也就是用戶界面，前端主要由HTH L和csS來構建，為了更方便地展現vi eu to del或者Hodel層的資料，已經產生了各種各樣的前后端模板語言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構建用戶界面的內置模板語言，

Model

Model是指資料模型，泛指后端進行的各種業務邏輯處理和資料操控，主要圍繞資料庫系統展開，這里的難點主要在于需要和前端約定統一的介面規則

ViewModel

ViewModel是由前端開發人員組織生成和維護的視圖資料層，在這一層，前端開發者對從后端獲取的Model資料進行轉換處理，做二次封裝，以生成符合View層使用預期的視圖資料模型，
??需要注意的是View Model所封裝出來的資料模型包括視圖的狀態和行為兩部分，而Model層的資料模型是只包含狀態的

比如頁面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態(展示)
頁面加載進來時發生什么，點擊這一塊發生什么，這一塊滾動時發生什么這些都屬于視圖行為(互動)
視圖狀態和行為都封裝在了View Model里，這樣的封裝使得View Model可以完整地去描述View層，由于實作了雙向系結， View Model的內容會實時展現在View層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操縱DOM去更新視圖，
??MVVM框架已經把最臟最累的一塊做好了，我們開發者只需要處理和維護View Model，更新資料視圖就會自動得到相應更新，真正實作事件驅動編程，
??View層展現的不是Model層的資料，而是ViewModel的資料，由ViewModel負責與Model層互動，這就完全解耦了View層和Model層，這個解耦是至關重要的，它是前后端分離方案實施的重要一環，

Vue

Vue(讀音/vju/，類似于view) 是一套用于構建用戶界面的漸進式框架，發布于2014年2月，與其它大型框架不同的是， Vue被設計為可以自底向上逐層應用，Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫(如：vue-router，vue-resource，vue x) 或既有專案整合，

MVVM模式的實作者

Model：模型層，在這里表示JavaScript物件
View：視圖層，在這里表示DOM(HTML操作的元素)
ViewModel：連接視圖和資料的中間件， Vue.js就是MVVM中的View Model層的實作者
在MVVM架構中，是不允許資料和視圖直接通信的，只能通過ViewModel來通信，而View Model就是定義了一個Observer觀察者

ViewModel能夠觀察到資料的變化，并對視圖對應的內容進行更新
ViewModel能夠監聽到視圖的變化，并能夠通知資料發生改變
至此，我們就明白了， Vue.js就是一個MV VM的實作者，他的核心就是實作了DOM監聽與資料系結

為什么要使用Vue.js

輕量級，體積小是一個重要指標，Vue.js壓縮后有只有20多kb(Angular壓縮后56kb+，React壓縮后44kb+)
移動優先，更適合移動端，比如移動端的Touch事件
易上手，學習曲線平穩，檔案齊全
吸取了Angular(模塊化) 和React(虛擬DOＭ) 的長處，并擁有自己獨特的功能，如：計算屬性
開源，社區活躍度高

第一個Vue程式

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

        <div id="app">{{message}}</div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:"Hello World"}});
    </script>   
</HTML>

基礎語法指令

v-bind

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind</title>
    </head>
    <body>
        <div id="app">
            <span v-bind:title="message">
                過來過來過來！！！！！！！！
            </span>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:'Hello World'+ new Date().toLocaleString()}});
    </script>   
</HTML>

v-if,v-else

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if##v-else</title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="ok">Yes</h1>
            <h2 v-else>No</h2>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{ok:true}});
    </script>   
</HTML>

v-for

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-for</title>
    </head>
    <body>
        <div id="app">
           <li v-for="(item,index) in items">
                {{item.message}}----{{index}}
           </li>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{items:[{message:'白日依山盡'},{message:'黃河入海流'},{message:'欲窮千里目'},{message:'更上一層樓'}]}});
    </script>   
</HTML>

v-on

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="hello">按鈕</button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:'hello world'},methods:{hello:function(event){alert(this.message)}}});
    </script>   
</HTML>

v-model

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            請輸入的文本: <input type="text" v-model="message" value="https://www.cnblogs.com/When6/archive/2023/02/24/hello"/>{{message}}
        </div>
        <div id="app1">
            多行文本： <textarea v-model="message"></textarea>  {{message}}
        </div>
        <div id="app2">
            單復選框：
            <input type="checkbox" id="checkbox" v-model="checked"/>
            <label for="checkbox">{{checked}}</label>
        </div>
        <div id="app3">
            多復選框：
            <input type="checkbox" id="jack" value="https://www.cnblogs.com/When6/archive/2023/02/24/Jack" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="jack">Jack</label>
            <input type="checkbox" id="join" value="https://www.cnblogs.com/When6/archive/2023/02/24/Join" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="join">Join</label>
            <input type="checkbox" id="mike" value="https://www.cnblogs.com/When6/archive/2023/02/24/Mike" v-model="checkedNames">
            &nbsp;&nbsp;
            <label for="mike">Mike</label>
            <span>選中的值：{{checkedNames}}</span>
        </div>
        <div id="app4">
            單選框按鈕
            <input type="radio" id="one" value="https://www.cnblogs.com/When6/archive/2023/02/24/One" v-model="picked">
            <label for="one">One</label>
            <input type="radio" id="two" value="https://www.cnblogs.com/When6/archive/2023/02/24/Two" v-model="picked">
            <label for="two">Two</label>
            <span>選中的值：{{picked}}</span>
        </div>
        <div id="app5">
                下拉框:
                <select v-model="pan">
                    <option value="" disabled>---請選擇---</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                    <option>D</option>
                </select>
                <span>value:{{pan}}</span>
            </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({el:'#app',data:{message:""}});
        new Vue({el:'#app1',data:{message:"白日依山盡，黃河入海流，欲窮千里目，更上一層樓，"}});
        new Vue({el:'#app2',data:{checked:true}})
        new Vue({el:'#app3',data:{checkedNames:[]}})
        new Vue({el:'#app4',data:{picked:'Two'}})
        new Vue({el:'#app5',data:{pan:''}})
    </script>   
</HTML>

component

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>component</title>
    </head>
    <body>

        <!-- <div id="app">
            <pan></pan>
        </div> -->
        <div id="app1">
            <pan v-for="item in items" v-bind:panh="item"></pan>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">
        Vue.component("pan",{props:["panh"],template:'<li>{{panh}}</li>'});
        // new Vue({el:"#app"});
        new Vue({el:"#app1",data:{items:["java","c++","c#","go"]}})
    </script>   
</HTML>

axios

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>
    <body>

    <style>
        /* 解決閃爍問題 */
        /* [v-cloak]{
            display: none;
        } */
    </style>
    <div id="app">
        <div>姓名: {{info.name}}</div>
        <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
        <div>連接：<a v-bind:href="https://www.cnblogs.com/When6/archive/2023/02/24/info.url" target="_bank">{{info.url}}</a></div>
    </div>
    </body>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"> 
     new Vue({el:"#app",data(){return{info:{name:null,address:{country:null,city:null,street:null},url:null}}},mounted(){axios.get('http://172.30.3.216:3000/mock/465/get').then(response=>(this.info=response.data))}});
    </script>   

</HTML>

{
    "name": "狂神說Java",
    "url": "https://blog.kuangstudy.com",
    "page": 1,
    "isNonProfit": true,
    "address": {
      "street": "含光門",
      "city": "陜西西安",
      "country": "中國"
    },
    "links": [
      {
        "name": "bilibili",
        "url": "https://space.bilibili.com/95256449"
      },
      {
        "name": "狂神說Java",
        "url": "https://blog.kuangstudy.com"
      },
      {
        "name": "百度",
        "url": "https://www.baidu.com/"
      }
    ]
  }

computed

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>computed</title>
    </head>
    <body>    
    <div id="app">
        <div>time:{{time()}}</div>
        <div>time1:{{time1}}</div>
    </div>
    </body>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript"> 
     var vm = new Vue({el:"#app",data:{message:'11'},mounted(){},methods:{time:function(){return Date.now()}},computed:{time1:function(){ this.message; return Date.now();}}});
    </script>   

</HTML>

slot

<!DOCTYPE HTML>
<HTML lang="en">
    <head>
        <meta charset="UTF-8">
        <title>slot</title>
    </head>
    <body>
        <div id="app">
            <todo>
                <todo-title slot="todo-title" :title="title"></todo-title>
                <todo-input slot="todo-input"   v-on:add="add_method"></todo-input>
                <todo-items slot="todo-items"  v-for="(item,index) in todoitems" :item="item" :index="index" v-on:remove="remove_method(index)" :key="index"></todo-items>
            </todo>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript">


        Vue.component("todo",{template:'<div>\
            <slot name="todo-title"></slot>\
            <slot name="todo-input"></slot>\
            <ul>\
                <slot name="todo-items"></slot>\
            </ul>\
            </div>'});

        Vue.component('todo-title',{props:["title"],template:'<div>{{title}}</div>'});

		//仿寫插入
        Vue.component('todo-input',{
            template:'<div><form>\
            請輸入: <input type="text" v-model="arr" value="https://www.cnblogs.com/When6/archive/2023/02/24/請輸入"><br>\
            <button type="button"@click="add_component">提交</button>\
             </div>',
             props:["arr"],
             methods:{
                   add_component:function(){this.$emit('add',this.arr);}}
             })
        Vue.component('todo-items',{
            props:["item","index"],
            template:"<li>{{index+1}},{{item}} <button @click='remove_component'>洗掉</button></li>",
            methods:{remove_component:function(index){this.$emit('remove',index);}}
        })


        var vue = new Vue({
            el:"#app",
            data:{title:"登鸛雀樓",todoitems:['白日依山盡,','黃河入海流.','欲窮千里目,','更上一層樓.'],arr:''},
            methods:{
                remove_method:function(index){
                    console.log("洗掉了"+this.todoitems[index]+"OK");
                    this.todoitems.splice(index,1);
                },
                add_method:function(arr){
                    console.log("添加元素"+arr);
                    this.todoitems.splice(this.todoitems.size,0,arr);
                }
            }
        
        })
    </script>   
</HTML>

Webpack

npm install webpack

vue-router

npm install vue-router --save-dev

專案

創建專案

vue init webpack hello-vue
#進入工程目錄
cd hello-vue
#安裝vue-routern 
npm install vue-router --save-dev
#安裝element-ui
npm i element-ui -S
#安裝依賴
npm install
# 安裝SASS加載器
cnpm install sass-loader node-sass --save-dev
#啟功測驗
npm run dev

sass-loader node-sass 老是安裝失敗，后來發現和node版本有關系, 解決辦法：

PS C:\代碼\vue> node -v
v14.17.1

安裝版本為：
"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",

目錄結構

assets：用于存放資源檔案
components：用于存放Vue功能組件
views：用于存放Vue視圖組件
router：用于存放vue-router配置

代碼

views/user/User.vue

<template>
  <div>
    <h1>個人資訊</h1>
    {{$route.params.id}}
  </div>
</template>
<script>
  export default {
    name: "User",
     beforeRouteEnter: (to, from, next) => {
      console.log("準備進入個人資訊頁");
     next(vm => {
        //進入路由之前執行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("準備離開個人資訊頁");
      next();
    },
    methods:{
        getData: function(){
             this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/user.json'
        }).then(function (response) {
          console.log(response)
        })
        }
    }
  }
</script>
<style scoped>
</style>

views/user/UserList.vue

<template>
    <div>
  <h1>用戶串列</h1>
  {{id}}
  </div>
</template>
<script>
  export default {
    name: "UserList",
      props: ['id']
  }
</script>
<style scoped>
</style>

views/Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label- >
      <h3 >歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="溫馨提示" :visible.sync="dialogVisible"  :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" >
          <el-button type="primary" @click="dialogVisible = false">確定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            form:{
              username:'',
              password:''
            },
            //表單驗證，需要在 el-form-item 元素中增加prop屬性
            rules:{
              username:[
                {required:true,message:"賬號不可為空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密碼不可為空",tigger:"blur"}
              ]
            },

            //對話框顯示和隱藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //為表單系結驗證功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，該方式稱為編程式導航
                this.$router.push('/main');
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

views/Main.vue

<template>
    <div>
      <el-container>
        <el-aside >
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i ></i>用戶管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <!-- <router-link to="/user/user">個人資訊</router-link> -->
				  <router-link :to="{name:'User',params:{id:1}}">個人資訊</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <!-- <router-link to="/user/userlist">用戶串列</router-link> -->
					<router-link :to="{name:'UserList',params:{id:222}}">用戶串列</router-link>
                </el-menu-item>
				<el-menu-item index="1-3">
    				<router-link to="/goHome">回到首頁</router-link>
				</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i ></i>內容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分類管理</el-menu-item>
                <el-menu-item index="2-2">內容串列</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i  style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>個人資訊</el-dropdown-item>
                <el-dropdown-item>退出登錄</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在這里展示視圖-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

views/NotFound.vue

<template>
    <div>
      <h1>404,你的頁面走丟了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

router/index.js

import Vue from'vue'
//匯入路由插件
import Router from 'vue-router'
//匯入上面定義的組件
import Main from "../views/Main";
import Login from "../views/Login";

import User from "../views/user/User";
import UserList from "../views/user/UserList";
import NotFound from '../views/NotFound'
//安裝路由
Vue.use(Router) ;
//配置路由
export default new Router({
	//路徑不帶 # 符號
	mode: 'history',
	routes:[
		   {
			//路由路徑
			path:'/main',
			//路由名稱
			name:'main',
			children: [
				{
				//   path: '/user/user/',
				  path: '/user/user/:id',
				  name: 'User',
				  component: User,
				}, {
				  path: '/user/userlist/:id',
				  name: 'UserList',
				  component: UserList,
				  props: true
				},
			  ],
			//跳轉到組件
			component:Main
			},{
			//路由路徑
			path:'/',
			//路由名稱
			name:'login',
			//跳轉到組件
			component:Login
			},{
				path: '/goHome',
				redirect: '/main'
			  },{
				path: '*',
				component: NotFound
			 }
		]
	});

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//匯入上面創建的路由配置目錄
import router from './router'//自動掃描里面的路由配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'



// Vue.config.productionTip = false
Vue.use(router);
Vue.use(ElementUI);
Vue.use(VueAxios, axios);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544996.html

標籤：其他

上一篇：React Native學習筆記----React Native簡介與環境安裝

下一篇：第122篇: JS函式一些基本概念

狂神--Vue

概述

前端三要素

JavaScript框架

UI框架

了解前后分離的演變史

MVC時代

基于AJAX帶來的SPA時代

前端為主的MV*時代

第一個Vue程式

什么是MVVM

為什么要使用MVVM

View

Model

ViewModel

Vue

MVVM模式的實作者

為什么要使用Vue.js

第一個Vue程式

基礎語法指令

v-bind

v-if,v-else

v-for

v-on

v-model

component

axios

computed

slot

Webpack

vue-router

專案

創建專案

目錄結構

代碼

views/user/User.vue

views/user/UserList.vue

views/Login.vue

views/Main.vue

views/NotFound.vue

router/index.js

main.js