vue.js學習之入門執行個體

標籤：class   bar   項目建立   ase   isp   demo   data   rip   掛載   

之前一直看過vue.js官網api，但是很少實踐，這裡抽出時間謝了個入門級的demo，記錄下一些知識點，防止後續踩坑，牽扯到的的知識點：vue、vue-cli、vue-router、webpack等。

首先看下實現的效果：

 

源碼下載戳這裡：源碼

1、使用vue-cli腳手架建立項目

vue-cli init webpack tll

備忘：使用webpack模板建立名為tll的項目，這裡會按照提示輸入一些項目基本配置，比如項目名稱、版本號碼、描述、作者、是否啟用eslint校正等等，不知道咋填的直接斷行符號即可

2、根據提示啟動項目

tll項目建立完成後，vue會自動提示幾個命令運行，直接依次執行：

cd tllnpm inpm run dev

這樣，一個自動設定好的vue項目便運行起來了，包含熱更新、自動校正等，當然這些配置在build檔案夾下的webpack.base.conf.js裡面，找到loader、preloader載入器，直接注釋掉相應功能也行。比如我寫代碼時，配置了eslint後，稍微有個空格啥的

多餘eslint都會報錯導致整個項目無法運行，這時直接注掉preloader中和eslint相關的即可。

3、編寫組件

在src的components目錄下，建立home.vue組件，詳細代碼：

<!--首頁組件--><template>    <div class="home">        <h3>{{msg}}</h3>    </div></template><script>    export default {        name:"home",        data(){            return {                msg:"這裡是home視圖"            }        }    }</script><style scoped>    h3{        background-color: #c5c5c5    }</style>

同樣地，建立user.vue組件：

<template>    <div>        <h3>{{msg}}，擷取到的參數是：{{$route.params.id}}</h3>    </div></template><script>    export default{        name:"user",        data(){            return {                msg:"這裡是user視圖"            }        }    }</script><style scoped>    h3{        background-color:gold    }</style>

最後是product.vue組件：

<template>    <div class="product">        <h3>{{msg}}，擷取到的參數是：{{$route.params.id}}</h3>    </div></template><script>    export default{        name:"product",        data(){            return {                msg:"這裡是product視圖"            }        }    }</script><style scoped>    h3{        background-color:violet    }</style>

4、修改app.vue，添加路由

<template>    <div id="app">        <nav class="top-menu">            <ul>              <!--遍曆li，輸出頂部工具列-->               <li v-for="item in menulist">                  <router-link :to="item.url">{{item.name}}</router-link>               </li>            </ul>        </nav>        <hr>        <div>          <router-view></router-view>        </div>    </div></template><script>    export default {        name:"app",        data:function (){            return {                menulist:[                    {"name":"首頁",url:"/home"},                    {"name":"使用者",url:"/user/18"},                    {"name":"產品",url:"/product/20"},                ]            }        }    }</script><style>    #app {            }    .top-menu ul, .top-menu li {      list-style: none;    }    .top-menu {      overflow: hidden;    }    .top-menu li {      float: left;      width: 100px;    }</style>

5、建立詳細路由配置

在src根目錄下直接建立檔案router.js作為我們的自訂路由，詳細代碼：

import VueRouter from "vue-router"import Home from "./components/Home.vue"import User from "./components/User.vue"import Product from "./components/Product.vue"export default new VueRouter({    routes:[        {path:"/home",component:Home},        {path:"/user/:id",component:User},        {path:"/product/:id",component:Product}    ]})

這下便建立了三個導航的匹配路由，最後只要再做一件事即可，那便是讓路由生效：將router掛載到vue執行個體上。

6、掛載路由群組件到vue執行個體

修改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 VueRouter from "vue-router"    import router from "./router"//使用路由群組件Vue.use(VueRouter)/* eslint-disable no-new */new Vue({  el: ‘#app‘,  template: ‘<App/>‘,  components: { App },  router:router})

至此，所有代碼已完畢，效果瀏覽器直接查看吧。

vue.js學習之入門執行個體