Yichun Sung   ·  1月前
Exp. 64  ·  3 貼文  ·  0 留言

手把手建立Vue-SPA開發環境

前言

在之前我們已經了解如何利用Webpack去打造一個Vue的開發環境。

如果你想複習:

安裝 Express

  1. 安裝 Express.js
npm install express

建立一個server入口 app.js

// 載入Express 套件
const express = require("express");

// 建立 express application 物件
let app = express();

/*

載入靜態頁面

*/
app.use(express.static(__dirname +"/dist"));

// 首頁
app.get('/', function(req, res){
    res.sendFile(__dirname+'/dist/index.html');

});

// 啟動伺服器在 http://localhost:8080/

let port = process.env.PORT || 8080;

app.listen(port, function(){
    console.log("Start")
});
  1. 啟動伺服器
node app.js

安裝 vue-router


npm install vue-router
  1. 在src資料夾中新增一個資料夾router ,並創立一個router.js

  2. 並在src資料夾中創建一個資料夾components,這個資料夾專門放置vue子元件。

  • router.js :

import Vue from 'vue'
import Router from 'vue-router'

// Coding
Vue.use(Router);
  1. 新增一個子元件 testComponent.vue

<template>
    <div id="testComponent">
        I'm a {{name}}.
    </div>

</template>
<script>
    export default {
        data(){
            return{
                name:"component"
            }
        }
    }

</script>
<style></style>
  1. 回到 router.js , 引入該元件

import Vue from 'vue'
import Router from 'vue-router'

// Components
import testComponent from '../components/testComponent.vue';

// Coding
Vue.use(Router);

export default new Router({

    routes: [
        {
            path: '/',
            name: 'testComponent',
            component: testComponent
        }

    ]      
});
  1. 回到 index.js ,引入router.js
import Vue from 'vue';
import App from './App.vue';
import router from './router/router.js';

new Vue({
  el: '#app',
  mounted : function(){
    console.log('Hello Webpack and Vue !');  
  },
  router,
  components:{
    App
  },
  template: '<App />'
});
  1. 在App.vuea的 <template></template>中,插入<router-view></router-view>
<template>
  <div class="App">
    <div class="hello">Hello {{ who }}</div> <br>
    <router-view></router-view>

  </div>
</template>
  1. 重新打包
npm run build
  1. 啟動伺服器後,觀察vue-router是否有作用。
node app.js
  1. 如果沒問題,就再建立一個新的子元件 page2.vue
<template>
    <div id="page2">
        I'm a {{name}}.
    </div>

</template>
<script>
    export default {
        data(){
            return{
                name:"page2"
            }
        }
    }

</script>
<style></style>
  1. 插入新元件於router.js

import Vue from 'vue'
import Router from 'vue-router'

// Components
import testComponent from '../components/testComponent.vue';
import page2 from '../components/page2.vue';
// Coding
Vue.use(Router);

export default new Router({

    routes: [
        {
            path: '/',
            name: 'testComponent',
            component: testComponent
        },
        {
            path: '/page2',
            name: 'page2',
            component: page2
        }

    ]      
});
  1. 調整一下App.vue,加入超連結去切換頁面,依照官方文件,建議使用<router-link></router-link>取代<a></a>
<template>
  <div class="App">
    <div class="hello">Hello {{ who }}</div>
    <router-link to="/">首頁</router-link> <br>
    <router-link to="/page2">page2</router-link>
    <router-view></router-view>
  </div>

</template>

<script>
export default {
  data() {
    return {
      who: 'Vue and Webpack !!'
    }
  }
};
</script>

<style scoped>
.hello {
  padding: .5em;
  font-size: 2em;
  background-color: #fcf;
}
</style>

重新打包後,可以看到完成結果。

再設定Webpack

在package.json中加入 watch, deploy

  • watch : 監視隨時更改中的code,不用一直重複build

  • deploy : 打包成正式上線版本(含壓縮程式碼)


"scripts": {
    "watch": "webpack --mode development --watch",
    "build": "webpack --mode development",
    "deploy": "webpack --mode production",
}

完整程式碼都在我的github上,歡迎去看看

  分享   共 332 次點閱
共有 0 則留言
您的留言
Yichun Sung
Exp. 64  ·  3 貼文  ·  0 留言