# 安裝vue環境及建立vue專案

## :memo:事前準備
請先自行安裝以下軟體：
1.Node.js(會自動安裝npm)，可在命令提示字元打上"npm -v"查看npm的版本。

## 安裝vue-cli套件
打開命令提示字元，輸入以下指令：

npm install -g @vue/cli


參數"-g"的意思是glocal，意為全域安裝，整台電腦都讀的到這個套件。
如果要解除安裝的話，則輸入以下指令：

npm uninstall -g @vue/cli

## 建立vue專案

打開命令提示字元，移動路徑到你想要建立vue專案的路徑，接著輸入以下指令：

vue create project_name


接著系統會問你要選擇預設的安裝方式還是手動的，我們這邊選擇manually，以手動的方式建立專案。


接下來會要你選擇想要安裝的套件，我們這邊選擇以下幾個，以按空白建的方式選取需要的套件。

- Choose Vue version
- Babel
- Router
- Vuex
- CSS Pre-processors
- Linter/Formatter


接著系統會問你這些套建的相關配置，選擇你想安裝的版本。


選擇router的模式，選n的話他的模式為'hash'，會在 URL 加上 '#' 符號。這邊直接按enter或者輸入Y再按enter的功能是一樣的。


選擇CSS預處理器，這邊選擇第一個，Sass/SCSS(With dart-sass)。


選擇ESLint模式，是選擇程式碼規範的嚴謹性，如果npm run serve 常錯誤的話，建議可改選用 ESLint + Prettier。這邊選擇第三個，ESLint + Standard config。


選擇代碼檢查時機，這邊選擇Lint on save，就是每次存檔時就會檢查。


選擇在哪為特性進行配置，這邊選擇In dedicated config files。


選擇是否將上述配置儲存到 preset 的 default (就是一開始那)，選擇N。


接著就會開始建立vue專案了!


## 運行專案
打開命令提示字元，移動路徑到剛剛建立的vue專案資料夾裡，先安裝一些需要的模組：

npm install 

接著輸入以下指令，以運行vue專案：

npm run serve

看到以下畫面就代表伺服器成功運行了。


接著我們到瀏覽器，在網址列上輸入"localhost:8080"，即可看到vue的畫面了


## 發布專案
這個指令的前提是你已經有一個網頁伺服器(如Apache或Nginx)。

打開命令提示字元，輸入以下指令：

npm run build

這個指令執行完後，會在專案的目錄下建立一個名叫"dist"的資料夾。接著將這個"dist"的資料夾移到伺服器的預設連結的資料夾內(以XAMPP套建來說，會建立在c:/xampp/htdcos裡面)，在網址輸入該路徑，就能連結到此靜態的網頁了。

## 如何讓別人連線到我的電腦看此專案?
在vue專案的目錄下新增一個名為"vue.config.js"的文件，接著將裡面的內容改寫為以下的樣子。在路徑的部分打上你的IP，儲存後在運行一次"npm run serve"，就可以讓別人的電腦連線到你的專案囉!

module.exports = {
    devServer: {
        public: 'http://your IP:8080/'
    }
}

## 建立https連線
打開vue專案目錄下的"package.json"，會看到有一行是"scripts"的指令，這個物件代表的是，當你輸入冒號前的指令，他實際上所運行的是冒號後面的指令，我們就來改寫這個部分吧!

將"scripts"的"serve"裡面的值改成以下程式碼：


這個步驟是當你運行"npm run serve"的時候，會幫你輸入https的參數為true，這樣就可以利用https來進行連線了。

這個步驟修改完後，我們還需要到"vue.config.js"裡面修改public的路徑，將http改成https。

module.exports = {
    devServer: {
        public: 'https://your IP:8080/'
    }
}

如果你已經有一個網域了，也可以改寫成以下的樣子：

module.exports = {
    devServer: {
        public: 'https://your domain:8080/',
        disableHostCheck: true
    }
}

## 建立安全的https連線
首先，你需要先申請網域及ssl憑證，筆者這邊申請的是[no-IP](https://www.noip.com/)的網域，及[sslforfree](https://www.sslforfree.com/)的ssl憑證，申請的方式放在參考資料內。

申請完後，在vue專案目錄下建立一個名為"certs"的資料夾，將申請完的ssl憑證放進這個資料夾裡面。然後打開"vue.config.js"，修改成以下的程式碼：

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/private.key'),
          cert: fs.readFileSync('./certs/certificate.crt'),
        },
        public: 'https://your domain:8080/',
        disableHostCheck: true
    }
}

## 參考資料
- [Vue CLI 3 安裝與使用教學](https://www.footmark.info/programming-language/vuejs/vue-cli3-seting/)
- [浮動IP照樣架站！NOIP DDNS 動態域名免費服務設定，遠端桌面也好用](https://iqmore.tw/no-ip-free-dynamic-dns)
- [免費的SSL憑證「SSL For Free」申請教學](https://uncleit.net/%E5%85%8D%E8%B2%BB%E7%9A%84ssl%E6%86%91%E8%AD%89%E3%80%8Cssl-for-free%E3%80%8D%E7%94%B3%E8%AB%8B%E6%95%99%E5%AD%B8.html)
- [[Vue.js教學筆記]如何在localhost中為Webpack創建有效的SSL](https://a091234765.pixnet.net/blog/post/403841189-%5Bvue.js%E6%95%99%E5%AD%B8%E7%AD%86%E8%A8%98%5D%E5%A6%82%E4%BD%95%E5%9C%A8localhost%E4%B8%AD%E7%82%BAwebpack%E5%89%B5%E5%BB%BA%E6%9C%89)