Landy Blog
0%

vue出一個電商網站-Vue Cli 3.0

發表於 分類於

安裝運行 Vue Cli 3.0

vue3 和 vue2的差異

最大的差異就在於vue3有介面可以直接點，不用在自己輸入command line來安裝或運行你的程式碼的環境了。

首先，如果你有先安裝過較舊的版本的vue-cli的話，你就要先把它們卸載掉。
接著，再輸入指令npm install -g @vue/cli來安裝3.0版本的vue-cli，
安裝完成後，你可以透過vue --versoin來確認是否vue已經是第3.0版本以上囉。

那在vue 3.0以上，就可以選擇用command或gui的方式，來創建你的專案喔。
那課程這邊會先用command line的方式來進行創建。

使用command line - 創建一個專案。

step1.
先輸入vue create 專案名稱
step2.
接著，你選擇手動安裝套件

建議安裝以上圖中所提到的那三個套件。
step3.
然後，它會問vue.js的版本要安裝哪個版本的，
這邊先選擇2.x的版本。
step4.
css的預處理器的選擇，這邊先選擇Scss的項目。
step5.
有關ESLint的嚴格程度，這邊是先選擇Standard的程度，我建議是先不要安裝啦。
step6.
接著，以上選項都選完之後，就會開始安裝。

安裝完之後，直接用cd進入你剛剛創的專案資料夾中。
step7.
然後，再輸入npm run serve

最後，成功運行之後，它就會跳出以上的畫面，上面的部分是本地端的網域。
下面那一個，若你想要分享給同網域的朋友的話，就可以選擇這一個網域。
那這邊先用本地端的網域囉。
這樣一來就可以運行第一個V3的專案囉。

資料夾結構說明

首先，你可以vue3的專案資料夾中，
有關webpack的相關設定檔，都被存在node_modules的資料夾中的@vue資料夾的cli-service目錄底下，
但是，在這一版本的Vue專案，是不需要去動到這方面的設定檔案喔。

第二
那src資料夾中的檔案，就是我們主要撰寫程式碼的地方囉，在這個資料夾裝的所有資料都會被編譯。
在main.js檔案中會引入vue檔案 和 App.vue檔案。
在vue3中的檔案，副檔名.vue是非必要的。
那在App.vue檔案中，你也可以看到它有引入了，HelloWorld.vue的元件檔。

那如果你有像是其他頁面的css樣式的scss檔案的話或者圖片，就可以放到src資料夾中的assets資料夾中，
如此一來，這些檔案才會被編譯到喔。

第三
如果你有一些不想要被編譯的檔案，你可以將它們放在public資料夾中。
那在public中有一個index.html檔案，這個檔案其實是會被編譯到的。
所以，我們在src引入的一些內容，都會被注入到這個檔案中。

第四，
當你輸入指令npm run build，就會打包專案檔案中的資料，然後，生成一個dist的資料夾。
然後，裡面也有一個index.html檔案。
然後，在這個檔案裡面有引用vendor檔和app的js檔案。
那vendor檔案，它就是從外部載入的內容。
那app的js檔案，就是我們撰寫的頁面。

第五，
如果要運行專案檔的正式版的話，就要對dist資料夾中的index.html檔使用live serve，就可以看到囉。

小插曲 - Vue3的npm run build無法看到正式版的專案檔網頁內容。

主要一樣是因為路徑引入錯誤的關係，所以，我參考了這篇 ，
新增了vue.config.js檔案，並在裡面加入了跟引入路徑有關的設定，就解決囉~~~

環境變數的設定 .env.development v.s .env.production

環境變數一樣有正式版和測試版的分別。
在課堂上有提供這一篇 ，環境變數的設定說明。

step1.

環境變數 - VUE_APP_變數名稱

我們在src資料夾中，新增一個檔名叫.env的檔案。

1
2
---.env檔案---
VUE_APP_API = http://localhost:8080/

要記得，你在vue3中宣告變數的話，變數名稱前面都要接VUE_APP，這樣vue的編譯才會吃得到這些變數。

step2.
我們先在App.vue元件中，引入這個新增的環境變數看看

1
2
3
4
5
6
7
8
9
10
11
12
---App.vue---
<script>
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created () {
    console.log(process.env.VUE_APP_API)  // 使用VUE_APP_API變數
  }
}
</script>

你可以看到我們再調用這個全域的環境變數前面還要加上process.env喔。

step3.
接下來，我們在來創個.env.development的檔案。
接著，我們在這個檔案裡面加入以下的名稱。

1
2
---.env.development---
VUE_APP_API=https://www.google.com/

接著，我們在package.json的檔案裡面有以下內容的部分

1
2
3
4
5
"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

在serve的部分加上--mode 環境變數檔案名稱。
那這個時候，你再重新輸入一次npm run dev的指令，可以看到console.log的內容會吃到development的變數內容，你就可以用這種方式來替換環境變數要吃哪個檔案中的內容。
事實上，.env.development這個檔名是vue環境中會吃到的預設檔案，所以，當你有這個檔案的時候，你就不需要特別去加--mode development，專案自然就會吃到這個檔案中的環境變數了。

測試變數檔 .end.development

注意~~~在vue中因為.env.development檔案室預設的檔名，所以，它不用特別加入--mode development。
也就是說如果今天有兩個檔案，一個是.env另一個是.env.development，那.env.development檔案的權重
會高於.env的檔案。
所以，”serve”: “vue-cli-service serve”如果在有.env.development的情況下，它會直接吃到這個檔案的變數內容。

step4.

正式變數檔 .end.production

在新增一個環境變數檔案.end.production。
那我們就是利用.end.production和.end.development 這兩個檔案來區分，一個是正式機在用的，
另外一個是測試機在用的。
那要特別注意喔，接下來你輸入npm run build它是直接吃到.end.production裡面的變數，
不需要再像step3中所說的，在serve的最後面加上--mode 變數檔案喔。

課程名稱: 使用 GUI 介面創建專案
step1.
你只要先輸入指令vue ui。
此時，就會直接跳出vue創專案的介面。
上面有三個選項，Projects, Create, Import。
那這邊我們要直接使用Create功能來啟用一個新的vue專案。
step2.
那接著，你可以看到在CREATE介面裡面所適用的選項，都是你用command line在選擇的選項，
所以，其實大同小異，你叫按照你在command line的情境時，使用的設定就ok囉。
step3.

在vue 的ui介面中，可以看到這個列表，
插件選項，就代表我們在專案中所是用到比較特別的插件。
依賴，就代表我們在前端所使用的套件，像是jQ和Boorstrap。
設定，會依照你安裝的插件，而提供相對應的設定。
任務，你可以看到serve, build，他們其實就是代表npm run serve和npm run build的指令。
在serve的介面裡面，你直接點執行按鈕，它就會開始變義相關的環境，
接著，在在按下啟動app，就可以直接將專案運行起來囉。
那在serve介面裡面，有一個輸出的按鈕，你可以點下去，就可以看到原本在編譯器上的那些命令提示的內容。

step4.
接著，你按下停止。
並按下停止鈕旁邊的變量齒輪，你就可以看到當下的環境是吃到哪一個變數檔的內容。

GUI 設定及 CLI 插件安裝說明

step1.

用vue ui來新增vue router

你直接點擊介面中的新增router即可新增。

step2.
接著，你安裝完之後，你可以看到妳的編譯器中的main.js檔案，變成main.ts，是因為你有引進typestring元件的緣故。
接著，你看main.ts檔案裡面，你可以看到它自動為你引入router的檔案，並新增了router屬性了。
第三，它也直接幫我們新增了router資料夾，裡面也新增好index.jsys檔案了。
第四，在App.vue檔案裡面，它也自動的為我們加入了<router-view>和<router-link>了。
step3.
接下來，我們就來看看運行起來的專案長什麼鬼樣子。
接下來，你可以看到運行首頁上，它直接幫我們新增了<router-link>的功能，
而且運行上也沒問題。

step4.

Base URL-檔案間的相對路徑關係

有關vue3檔案的設定部分。
在ui介面上有一個設定的選項，點下去之後，裡面的Vue Cli選項中有一個Base URL的項目。
它就是輸出檔案，之間相對路徑的關係。
那如果，你今天的跟目錄有換比如說
我們釋出的檔案不是在根目錄底下，
比如不是 http://landy510.github.io 底下，而是在http://landy510.github.io/Vue-testing 底下，
那這樣我們需要做一些調整，
此時，我們就要去更改Base URL的設定，把它改成/Vue-testing/
這樣子，就可以成功的在http://landy510.github.io/Vue-testing 底下運行囉。

CLI 2.0 專案搬移到 3.0 實際演練

step1.
首先，你先打開課程提供的專案 ，
它的package.jason檔案，先來看看他們都安裝了那些套件。
axios
bootstrap
jquery
popper.js
vue-axios
vue-loading-overlay
那以上這些就是我們需要額外再安裝的套件。
有兩種載入的方式，一個是vue ui或者直接用command line來安裝。
他們倆種結果都一樣，擇一即可。
所以，我選擇用command line輸入來安裝
直接輸入指令npm install –save axios bootstrap jquery popper vue-axios vue-loading-overlay
就可以直接把上面的套件直接一次安裝。

step2
將以上安裝的這些檔案引入main.js檔案中，並在main.js檔案中啟用這些元件

1
2
3
4
5
6
7
8
---main.js---
import axios from 'axios';
import VueAxios from 'vue-axios';
import Loading from 'vue-loading-overlay';
import '../../node_modules/vue-loading-overlay/dist/vue-loading'

Vue.use(VueAxios, axios);
Vue.component('Loading', Loading);

step3.
將課程上提供的src中的App.vue的內容貼到你的App.vue中。
這個時候，會出現錯誤。
是因為，在App.vue中有環境變數APIPATH和CUSTOMPATH還沒有被定義。
所以，我們要再創一個.env.development的檔愛，裡面放這兩個環境變數

1
2
3
---.env.development---
VUE_APP_APIPATH =  https://vue-course-api.hexschool.io
VUE_APP_CUSTOMPATH = stealing610

step4.
接下來，在將原本在App.vue中的APIPATH 和 CUSTOMPATH分別取代成VUE_APP_APIPATH和VUE_APP_CUSTOMPATH。

step5.
接下來去老師提供的Home.vue元件檔把裡面的內容覆蓋掉你原本的Home.vue元件檔中，此時，應該頁面上就有呈現正確取回來的內容囉。

vue3.0 import元件的方法

在vue3.0專案中的router資料夾中的index.js檔案中，你可以看到它引入元件的寫法，不用在像以前那樣要定義該元件名稱在使用該變數，
才能使用該元件。 新版的vue可以直接用該元件檔所在的路徑直接引用，就可以使用它囉。
ex:

1
2
3
4
5
{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue') //直接引用該元件所在路徑即可
 }

6 分鐘，使用 Vue Cli 快速創建原型

我們直接透過webpack來決定.vue檔案，來進行快速的開發。
這通常是用在一個小型的專案或雛型時會用到。
我們就用之前實作的todolist當作範例吧。
step1.
首先，先在編譯器裡面輸入npm install -g @vue/cli-service-global
step2.
新創一個index.vue的元件檔。
step3.
接著，你將原本<div id="app"></div>裡面的內容，除了最外層的<div id="app"></div>之外，其他的都複製到index.vue元件檔中。
然後，
加入<script></script>，將原本包在vue元件中的內容，都丟到export default的花括號中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script>
    export default{
        
        data(){
            return {
                Todos:[
                    {
                        id:'345',
                        title: '你好嗎',
                        completed: false
                    }
                ],
                cocheObj:{},
                cocheTitle: '',
                newText:'',
                visibility: 'all'
            }
            
  },
    methods:{
    addTodo: function(){
      let newObj = {};
      newObj.title = this.newText;
      newObj.id = Math.floor(Date.now());
      newObj.completed = false;
      this.Todos.push(newObj);
      this.newText = '';
    },
    editTodo: function(item){
      this.cocheObj = item;
      this.cocheTitle = item.title;
    },
    cancelEdit: function(){
      this.cocheObj = {};
    },
    DoneEdit: function(item){
      item.title = this.cocheTitle;
      this.cocheObj = {};
      this.cocheTitle = '';
    },
    removeTodo: function(item){
      let newIndex = this.Todos.findIndex((el)=>{
        return item.id === el.id;
      })
      this.Todos.splice(newIndex, 1);
    },
    clearAll: function(){
      this.Todos.splice(0, this.Todos.length);
    }
  },
  computed:{
    filterTodo: function(){
      if(this.visibility === 'all'){
        return this.Todos; 
      } else if(this.visibility === 'doing'){
        // let filterArray = [];
        // this.Todos.forEach((item)=>{
        //   if(item.completed===false){
        //     filterArray.push(item);
           
        //   }
        // })
        let filterArray = this.Todos.filter(function(item){
            if(!item.completed){
                return true;
            }
        })
        return filterArray;
      } else if(this.visibility === 'finish'){
         let filterArray = [];

        // this.Todos.forEach((item)=>{
        //     if(item.completed===true){
        //         filterArray.push(item);
                
        //     }
        // })
        let tempArray = this.Todos.filter(function(item){
            if(item.completed){
                return true;
            }
        })
        return tempArray;
      }
    },
    filterNotTodo: function(){
      let counter = 0;
      this.Todos.forEach((item)=>{
        if(item.completed === false){
          counter++;
        }
      })
      return counter;
    }
  }

    }
  
</script>

step3.
接著一樣在index.vue元件檔中，加入<style></style>，裡面插入會使用到的css樣式，

1
2
3
4
5
6
7
<style>
@import url(css/all.css);

.completed {
    text-decoration: line-through
  }
</style>

step5.
結束之後，就運行npm serve index.vue，然後用localhost:8080來看專案結果，應該就可以正常呈現內容囉。