Landy Blog
0%

Vue_Cli_課程筆記-安裝完成後產生的各檔案意義

發表於 更新於 分類於

Vue Cli 所產生的資料夾結構說明

在VScode的環境下使用Vue

你先用vscode打開那個vue專案檔，接著，在你的編譯器中輸入 ctrl + 反斜線 (在鍵盤左上角數字鍵1左邊的那個按鍵)，
這時候，會跳出來可以輸入指令的區塊，輸入npm run dev之後，應該會跳出http:\\localhost:8080的提示訊息，接著，直接在瀏覽器中輸入http:\\localhost:8080，就可以在網頁上開啟你的專案了。

接下來是vue cli產生的檔案介紹

README.md

這個檔案裡面，有提供一些vue cli可以用的指令
npm install 就是安裝相關的套件。
npm run dev　運行開發中的環境
npm run bulid 運行正式版的環境

當我們執行npm run build，它會運行 build/build.js 的檔案，將所有的網頁內容打包壓縮。
當我們輸入這個指令之後，專案檔會產生出一個 dist 的資料夾。
那在這個 dist 資料夾中，會有一個 index.html，這個 html 一定要在 HTTP 的 server 下才能運行，直接打開它是沒有辦法運行的喔，要用像是 live server 這種套件，打開它才行。

小插曲 - index.html 引入的 css 和 js 報 MIME type 的錯誤

當我用嘗試用Go live來將dist資料夾中的index.html在瀏覽器中開啟，
但是，卻出現以下的錯誤log

這個問題主要是因為讀不到專案檔裡面的樣式檔導致的，
所以，你看以上的圖片中它是說該錯誤是發生在index.html檔案中，
所以，你就去dist資料夾中的index.html中，該改它引入的路徑
原本預設的路徑是

1
2
3
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.0aad2172a75b8ed4f46c.js></script>
<script type=text/javascript src=/static/js/app.2f2e5edd9af2c59aa514.js></script>

你可以看到src的最前面都有一個反斜線/，
你就將這個反斜線都去掉

1
2
3
<script type=text/javascript src=static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=static/js/vendor.0aad2172a75b8ed4f46c.js></script>
<script type=text/javascript src=static/js/app.2f2e5edd9af2c59aa514.js></script>

改完之後，就能正常的在VSCode中的live Server中，正確的在瀏覽器中，打開dist資料夾中的index.html檔案囉。

最外層的index.html v.s dist資料夾中的index.html


如上圖，
在你的專案檔中的最外層有一個index.html的檔案(不是dist資料中的index.html那個喔)，
你之後的 Vue 專案中不管是 js 檔、css 檔、Vue 元件檔的程式碼內容經過編譯後，都會注入到這個 html 檔案裡面。
但是，為什麼它css和js檔案都沒有引入呢？
因為，當你使用npm run build這個指令時，專案管理工具會自動將src資料夾中的相關內容直接注入到你的 dist 資料夾中的 index.html 檔案中，
也就是說，你在 index.html 寫的內容，在你使用npm run build的時候，會被複製到dist資料夾中的index.html檔案中，
並且將 src 中的套件也一併注入到 dist 資料夾裡的 index.html 檔案中。
所以，最外層的 index.html 檔案不需要額外撰寫程式碼內容，除非你要直接手動引入某些套件的 CDN到這個 index.html 檔案中，不想要透過 Vule-Cli 來引入。
最終，在你使用npm run build指令時，專案管理工具就會自動將原本的套件和你新增的套件，都引入到 dist 資料夾中的 index.html 檔案。

注意～～～　在最外層的inde.html檔案中，有一段註解掉的程式碼，
<!-- built files will be auto injected -->
這行是代表，那些被注入的套件的內容會被加到這行註解底下，
所以!!! 你在寫程式碼內容的時候，不要寫到這行程式碼下面喔!! 不然，程式應該會無法運行。

.postcssrc.js　檔案 和　.babelrc檔案

這兩個檔案，是有關編譯器的相關設定，
但是，Vue-Cli 都已經為我們把這兩個設定檔都設定好了，所以，我們比較不需要去了解怎麼設定囉。

src資料夾 - 所有要引入的檔案放這

這個資料夾中，會涵蓋所有我們要引入的檔案。

static 資料夾 - 資料不會被編譯

這個資料夾是放入不會被編譯的檔案。

src資料夾 - assets資料夾

在這個資料夾中的檔案是會被編譯的，通常會將某些圖片檔或者 SCSS 檔案放到這個資料夾中，統一管理。

src資料夾 - main.js

這個檔案，就是 Vue 專案檔中，所有 Vue.js 的進入點。就跟 Webpack 的專案管理方式一樣。
在這個檔案中，你會看到

1
2
3
4
5
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})

這段內容，就是之前課程內容，用來綁定index.html中的app的區塊。
就等同於以下寫法的縮減版本

1
2
3
4
5
6
7
var app = new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

接著，在它上方有import App from './App'
這個APP是元件的名稱，
那這個元件的定義的檔案就在main.js的同一層，一個叫App.vue的檔案。
這個App.vue元件檔有包含x-template, javascript, style這三個部分，購成一個 Vue 的元件檔。

那在 Vue 元件檔中，可以再import其他元件的檔案。
像在 App 元件檔中，就又有再import另一個 Helloworld 元件檔。

node_modules 資料夾

這個套件中的檔案，就是我們利用npm install所安裝的套件，都會放在這個資料夾中。
這個套件有包含 webpack 的套件，也有一些前端的套件(像是: jQuery…)都會放在這個資料夾中。

dist 資料夾

前面有說過了，這個檔案就是透過npm run build所生成的檔案。
那它的 index.html 一定要在 HTTP Server 底下才能運作喔。

Webpack運行觀念


在webpack中有一個main.js檔案，它會引入其他相依內容，像是vue, sass, js之類的，
並且webpack會去監控這個main.js檔案，以及它所引入的檔案，
當這些檔案內容有更動時，webpack 也會跟著跟動內容，接著，將這些檔案轉譯成相對應的檔案，像是 .jpg, .js 等檔案。

entry

所以，webpack有一個entry的屬性，當這個entry的進入點所監控的檔案，有變動的話，就會去做編譯。

loader

webpack有一個loader，它會決定引入的檔案要怎麼輸出在js檔案裡面。

output

最終的檔案，會被webpack ouput輸出。

build 資料夾

在你的專案檔的build資料夾中，會有一個webpack.base.conf.js的檔案，
那在這個檔案裡面你就可以看到以下設定

entry

entry 這個物件，裡面就是被監控檔案的檔案路徑。

output

output 物件，其設定就代表被轉譯後的檔案會被輸出到哪個目錄底下。

resolve

resolve 物件，裡面有一個 extension 屬性，裡面是放引入檔案路徑中，可省略的附檔名
像是: ./APP.vue 在路徑中就不用寫.vue 直接寫 ./APP 就可以了。

alias

alias 屬性，是路徑的別名
ex:

1
2
3
4
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
}

這行程式碼中，可以看到 @ 是可以直接代表 src 這個路徑。

module

那在webpack中有loader，那在webpack.base.conf.js中的module中
的內容就是loader的內容。

那不是全部的loader都寫在這個檔案中，有些loader也寫在build資料夾中的utils.js中。
像是sass的loader就是寫在這個檔案中喔。

config 資料夾

index.js

這個檔案是針對整個編譯環境所使用的。
它可以改變你的host或你的port。

dev.env.js 和 prod.env.js

這兩個檔案的內容，是我們在寫vue時，可以用到的環境變數。
那這些環境變數是可以在 Vue 檔案中引用的。

dev.env.js 和 prod.env.js 使用時機

那為什麼要特意切成兩個環境變數來實用呢? 他們不是一樣的效果嗎?
原因是，開發時，許多變數或設定在 測試環境 與 正式環境 是不同的
dev.env.js 是用在測試使用
prod.env.js 是用在正式使用
這時候就可以使用環境變數來切換喔。
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---dev.env.js檔案---
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

---HelloWorld.vue 元件檔---
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: process.env.NODE_ENV
    }
  }
}
</script>

在上面這個範例你可以看到在dev.env.js檔案中，
有一個變數叫NODE_ENV，然後它的內容是’”development”‘，
這樣就可以將元件HelloWorld的msg內容就可以修改成NODE_ENV的內容囉。

在dev.env.js檔案新增變數
ex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---dev.env.js檔案---
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  HTTP_PATH: '"http://localhost/"'
})

---HelloWorld.vue 元件檔---
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: process.env.NODE_ENV,
	  http: process.env.HTTP_PATH
    }
  }
}
</script>

這邊要特別注意一下，變數的內容要用單引號和雙引號把內容包起來喔，
即: '"http://localhost/"'
當你新增完環境變數之後，你要在此輸入npm run dev才能將新變數新增到你的專案檔中喔。
那你在dev.env.js檔案中，新增的參數若測試沒問題，而且也是必要變數的話，就要手動加入到prod.env.js的檔案中喔。
因為，dev.env.js 是在測試機使用，prod.env.js 是在正式機使用，
若在測試機上測是沒問題，當然要把這些沒問題的部分都加到正式機的變數環境裏頭囉，不然你測試幹嘛XD

安裝套件在 Vue Webpack 中

怎麼透過 Vue Webpack 來載入外部的套件
在課程中示範了載入以下兩個外部套件
一個是載入Bootstrap
一個是載入vue-axios -> 它是使用 Ajax 的一個工具

Bootstrap部分下載

首先，先輸入
npm install bootstrap
但是，課程中有提到要用sass的方式來載入，但是，在vue中，sass並沒有安裝完整的loader，
所以，我們這邊也要一併安裝，所以，最終的指令是
npm install bootstrap node-sass sass-loader --save，如此就會安裝 bootstrap 和 sass-loader 囉。

第二，測試一下是不是 sass 可以運作
我們直接在App.vue元件檔中，修改最下面的一段
ex:

1
2
3
4
5
6
7
8
9
10
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

把它改成

1
2
3
4
5
6
<style lang="scss">
$color: red;
body{
	 background-color:$color;
}
</style>

修改完之後，重新輸入npm run dev指令，如此，應該就能看到背景被你改成紅色囉，
如果是這樣的話，就代表你的sass有成功載入囉。

小插曲 - 測試sass載入成功與否->測試結果失敗

當我按照老師的方式修改App.vue中的內容，按下npm run dev，發現編譯器complie超久，
然後，我就看到討論區以下的解法
同學提問
同學提問
上面是同學的提問，跟我的問題一樣，
接著，下面是助教的解法，它提議先將你安裝完的node-sass和sass-loader刪掉，
接著，再安裝助教在討論區提供的版本。
按照助教的操作後，確實可以讓scss在vue的專案檔中使用囉~~~

引入bootstrap

接著我們將上面的範例中的內容改成引入bootstrap的內容

1
2
3
4
5
6
7
8
9
10
11
12
---在App.vue元件檔中---
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <button class="btn btn-danger">按鈕</button>  
  </div>
</template>

<style lang="scss">
 @import "~bootstrap/scss/bootstrap"
</style>

你可以看到，我們在App.vue的元件檔中的style中，引入了bootstrap。
接著，你要測試是否你有成功引入bootstrap，你就在同一文件中的template中隨便寫一個bootstrap的元件，像這邊就是寫入一個bootstrap樣式的按鈕，如果，
有正確出現bootstrap的樣式的話，就代表bootstrap引入成功囉。

那我們是怎麼知道引入bootstrap的路徑的，其實你在node_modules資料夾中的boostrap資料夾，
它的scss資料夾中，就有一個boostrap.scss的檔案。所以，以上範例就直接將 bootstrap.scss 檔案引入到 App 元件檔中。

安裝vue.axios套件

你先輸入npm install --save axios vue-axios
接著，安裝完成後，我們就要運行它
在官網中就有提到，要將以下的內容加到entry的檔案中

1
2
3
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

所以，你就將以上的內容貼到在 src 資料夾中的 main.js 檔案中。

那import axios from 'axios'這行的功能為將 axios 主要功能引入進來。
import VueAxios from 'vue-axios'這行的功能是將它轉為 Vue 的套件。

那在官網還有特別提到，
要在 Vue 專案檔中使用 axios，還要在 main.js 中，再加入Vue.use(VueAxios, axios) 這一行，
那因為，我是用 Vue2 所以，是加入這一行，Vue3 要加入的內容就又不一樣囉。
所以，你就將Vue.use(VueAxios, axios) 一樣加入到main.js檔案中。

當加完這一行之後，我們就可以在其他地方使用 Vue.axios 囉，利用它的 Ajax 技術來將後端的資料取過來。

測試 Vue.axios 是否有載入正確

首先，你先去以下這個任意產生api的網址，將其產生api取下來。

第二，去App.vue元件檔中，
它的script中去新增vue.axios的內容，來將api的內容取進來

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created(){
    this.$http.get('https://randomuser.me/api/').then((reponse) =>{
      console.log(reponse);
    })
  }
}
</script>

我們在這個元件新增created的hook，並在裡面加入了 vue.axios 取得 api 資料的語法，而這段語法你可以去 vue.axios 的官網查到喔。
接著，就由 console.log 來看 reponse 的結果，如果確實有結果的話，就代表你成功載入vue.axios囉~~~