使用vue-cli腳手架搭建vue專案。（webpack）
注：本文不介紹vue語法。只是個從零搭建vue的demo。
1.首先是環境搭建。配置好node環境。全域性安裝vue，vue-cli.這裡就不做介紹了。
2.使用vue-cli初始化專案。vueTemplate是專案名稱。
vue init webpack vueTemplate後面有一連串的輸入，包括作者，專案頭是否啟用測試等。按照個人要求輸入就好。
專案初始化完成後的專案目錄如下：
3.啟動服務 到專案目錄下執行: npm run dev
4.修改路由配置。 專案預設的路徑是“/”。在打包後執行也是“/”路徑下的頁面。
修改helloWorld.vue為login.vue
頁面跳轉可以在元件的方法中使用： this.$router.push({ path: 'home' });
例如：登陸頁面點選登陸驗證完成後，跳轉到首頁。就可以使用該方法。以下是登陸的部分程式碼。我用的vue-resource代替ajax.不過vue官方推薦使用axios。
<template> <div id="containerBox"> <div class="loginBox"> <div> <label>使用者名稱</label> <input id="name" v-model="username" type="text" /> </div> <div> <label for="pwd">密碼</label> <input id="pwd" :value="password" type="password" /> </div> <div> <button id="login" @click='login()'>登入</button> <button id="reSet">重置</button> </div> </div> </div> </template> <script> import "../../static/css/common.css" import "../../static/css/login.css" import Vue from "vue" import VueResource from "vue-resource" Vue.use(VueResource); Vue.http.options.emulateJSON = true; export default { data() { return { username:'', password:'' } }, methods:{ login : function() { this.$router.push({ path: 'home' }); //不走伺服器直接跳轉頁面。 var data = { username: this.username, //資料雙向繫結 password: "f429ec54f354b72bed77a5c0afedecb91f347f479a09f74f4107592764b56d1c", version: '1.0' } var url = "http://192..../api/v1/login"; this.$http.post( url, data, ).then(function(res) { var resCode = res.body.errorCode; if (resCode == 200) { localStorage.setItem("token", res.body.data.token); localStorage.setItem(res.body.data.user, res.body.data.password); this.$router.push({ path: 'home' }); } else if (resCode == 400) { alert("使用者名稱或者密碼錯誤"); } }, function(err) { alert("伺服器錯誤，請聯絡系統管理員！") console.log("err" + err); }) } } } </script> <style scoped> </style>
5.連結形式的跳轉。（router-link, router-view）
router-view是載入vue元件的容器。在app.vue中就有這個標籤。 router-link會被vue解析成a標籤實現跳轉。例如下一個左側選單欄。 用router-link對應routes中的路徑。app.vue中router-view就會載入相應的元件。
我寫了一個頭部元件（topBox.vue）和一個左側選單欄(leftBar.vue)。會貼左側選單欄程式碼以供參考。如有不對請在評論區指出。謝謝。
<template> <div id="leftContainer"> <ul> <li><router-link id="home" to='/home'>首頁</router-link></li> <li @mouseenter='barHover($event)' @mouseleave="barOut($event)">裝置管理<div :style='{display:show}' @click="displayChild($event)" class="dropdown"></div> <ul style="display:none;"> <li>裝置分組</li> <li>裝置列表</li> </ul> </li> <li><router-link id="member" to='/member'>素材管理</router-link> </li> <li @mouseenter='barHover($event)' @mouseleave="barOut($event)">釋出管理<div :style='{display:show}' @click="displayChild($event)" class="dropdown"></div> <ul style="display:none;"> <li>節目管理</li> <li>任務管理</li> <li>模板</li> </ul> </li> <li @mouseenter='barHover($event)' @mouseleave="barOut($event)">人員管理<div :style='{display:show}' @click="displayChild($event)" class="dropdown"></div> <ul style="display:none;"> <li>裝置分組</li> <li>裝置列表</li> </ul> </li> <li>系統設定</li> <li>日誌管理</li> <li>訊息管理</li> </ul> </div> </template> <script> export default { data() { return { show:'none' } }, methods: { barHover: function(e) { var firstChild = e.target.firstElementChild; firstChild.style.display = 'inline-block'; }, barOut : function(e) { var firstChild = e.target.firstElementChild; if (firstChild.className == 'dropdown') { firstChild.style.display = 'none'; } }, displayChild : function(e) { var target = e.target; var parent = target.parentElement; var ul = parent.getElementsByTagName('ul')[0]; var display = ul.style.display; if ('block' ==display) { ul.style.display = 'none'; target.setAttribute('class', 'dropdown'); } else { ul.style.display = 'block'; target.setAttribute('class', 'dropup'); } } } } </script> <style scoped> #leftContainer { display:inline-block; float:left; height: -webkit-calc(100% - 70%); height: -moz-calc(100% - 70px); height:calc(100% - 70px); width: 10.4%; background-color:#0d1554; color:#FFF; font-size : 1.25rem; } ul li { height: auto; min-height:50px; padding: 10px 0 0 30px; border-bottom: 1px solid #160254; list-style: none; } .dropdown { margin-left: 15px; display:inline-block; width:20px; height:10px; background:url(../../static/img/triangle.png) 0 50% no-repeat; background-size: 20px 10px; } .dropup { -webkit-transform: rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg); margin-left: 15px; display:inline-block; width:20px; height:20px; background:url(../../static/img/triangle.png) 0 50% no-repeat; background-size: 20px 10px; } </style>
樣式程式碼就不貼了。整體的執行結果截圖如下：
點選登入條狀到首頁，如下。頭部和左側都是元件的形式寫入
6.專案打包。在package.json的scripts物件中新增 如下程式碼："pack" : "webpack --config build/webpack.prod.conf.js"
這表示在生產模式下打包，如果把webpack.prod.conf.js改成webpack.dev.conf.js是在開發模式下打包。在開發模式下打包app.js是不分割的。會很大。不利於首屏載入。
然後載入dist頁面下的index.html是白屏。是因為 app.js載入路徑的問題。webpack.base.conf.js中output中輸出的publicPath是“/”。改為“./”就可以正常載入了。注：這個修改是用配置檔案的在config目錄下的index.js檔案中修改assetsPublicPath: './',
7.至此打包就已經完成了。只是個簡單的demo。如果不對請在評論區指出，謝謝。