# vue CLI 專案資料

>大家加油

`<style scoped>`
表示只在該處進行調整樣式
透過 Vue Router 設置每頁的 title [👉link](https://leahlin912.github.io/2019/10/03/Vue-%E8%A8%AD%E7%BD%AE%E6%AF%8F%E9%A0%81%E7%9A%84title%E5%8F%8A%E5%9C%96%E6%A8%99/)
[安裝vue cli設定](https://zhuanlan.zhihu.com/p/79064823)

<div style="text-align:right;padding:10px 0;">
<b>♌VSCODE指令 💥錯誤訊息</b>
</div>

|||||
|-|-|-|-|
|01|建立專案||||
||CDN|使用線上引入方法|||
||NPM|NPM安裝自行設置 webpack|||
||Vue CLI|最方便快速也最多人用的|[Vue CLI](https://cli.vuejs.org/)||
||||||
|02|Vue CLI安裝||||
||♌輸入安裝|`npm install -g @vue/cli`|留意[node.js](https://nodejs.org/zh-tw/download/)版本||
||確認安裝版本|` vue -V`|[出現錯誤💥01](#error01)||
|||出現 @vue/cli 4.5.10 就表示安裝|||
||||||
|03|新專案建立||||
||♌輸入安裝|`vue create my-project`|my-project 的部分代表你要新建的專案名稱||
||選擇建立版本|vue2/ vue3/ 手動設定|`[方向]`選擇/`[enter]`確認 |
||手動設定||`[方向]`選擇/`[space]`勾選/`[enter]`確認|
|||01 babel|||
|||02 typescript|||
|||03 PWA|||
|||04 Router|控制各個頁面路由||
|||05 Vuex|||
|||06 CSS-pre-processors|選擇dart-sass||
|||07 Linter/Formatter|規範 Coding Styles用||
|||08 Unit Testing|||
|||09 E2E Testing|||
||細部設定|01 placing config|工具的設定檔要儲存方式||
||||個別config / 整包package.json||
|||02 save preset?|||
||||是否儲存剛剛的設定?以便下次新建專案時直接使用||
||||||
|04|開始運行||||
||♌輸入運行|`cd my-project`|前往...資料夾||
|||` npm run serve`||
||
|05|打包資料||||
||♌輸入運行|`npm run build`|打包資料|
||||[請參考😏](https://book.vue.tw/CH3/3-3-vue-dev-server-build.html)||
|||||||
<div id="error01" >

:::spoiler 💥01` vue -V`出現`因為這個系統上已停用指令碼執行，所以無法載入...`錯誤訊息

#### step 00

可參考[此處](https://hsiangfeng.github.io/other/20200510/1067127387/)

#### step 01
#### step 02

執行輸入 `Set-ExecutionPolicy RemoteSigned`


此時你不用害怕，按下「A」就可以了，因為我們目前要更改的原則是 「RemoteSigned」，在前面有說過這個執行原則是「可以使用本機所撰寫的腳本檔案，不需要簽署就可以執行，但是從遠端下載的腳本就必須經由可信任的發行者簽署後才可以執行。」，因此安全性是較好的。

當你按下 「A」，你就可以再去試試看執行 npm 、vue 、 gulp 以及 webpack 等等指令囉～

記得終端機要全部關閉在開啟，這樣子效果才能夠正常使用以上指令唷。

成功!!

:::

</div>

### 資料夾結構
|圖示|結構||
|-|-|-|
||<br>🟠運行相關套件 node-modules<br><br>🟢公開檔案目錄 public<br>👉👉favicon.ico<br>👉👉index.html<br><br>🔵主要開發項目 src<br>🔹🔹assets<br>🔹🔹components<br>🔹🔹router<br>🔹🔹store<br>🔹🔹views<br>👉👉App.vue<br>👉👉main.js<br><br>.gitgnore...|||

|🔵主要開發項目 src|||
|-|-|-|
|🔹🔹assets|放置圖片/CSS/JS/SCSS等靜態檔案的預設目錄|||
|🔹🔹components|如NavBar.vue等區塊元件檔案的預設目錄|||
|🔹🔹router|vue.js管控各路由畫面與判斷|||
|🔹🔹store|資料與登入 含modules/auth.js與index.js|||
|🔹🔹views|每個各別主體區塊頁面||
|👉👉App.vue|排序每個元件載入次序，最高級父元件||
|👉👉main.js|AXIOS主設定|||

### 粗糙渲染流程 (待補

|||||
|-|-|-|-|
|01父容器主體|index.html |提供完整HTML結構|將`<div id="app">`挖空|
|02最高級父元件|App.vue|將共用components載入|<NavBar />|
|||將個別views內的模板載入|<router-view />|
|03判別載入views模板|router/vue.js|` path: "/register",`|

### 0.建立專案

如同 React 和 Angular 一樣，我們可以使用多種方式來建立專案，例如：

1. 在 Html 的 <script></script> 標籤中直接引入。
2. 使用 npm 安裝 vue 並自行設置 webpack。
3. 最方便快速也最多人用的 [Vue CLI](https://cli.vuejs.org/)。

>簡單來說，Vue CLI 幫助開發者把常用到的資源都打包起來

<br>

### 1.建立 Vue 專案

首先打開 Terminal 準備輸入指令。

**方法 1：使用 npx 建立專案**
`npx @vue/cli create my-project`

**方法 2–1：全域安裝 vue-cli 環境並建立專案**
`npm install -g @vue/cli`

在看到一連串的安裝過程後，在終端機輸入 vue -V (V 要大寫)，如果有出現 @vue/cli 4.5.10 就表示安裝成功囉。

::: warning
如出現下列訊息 [可參考此處](https://hsiangfeng.github.io/other/20200510/1067127387/)
:::

. : 因為這個系統上已停用指令碼執行，所以無法載入 C:\Users\Hsiangfeng\Documents\WindowsPowerShell\Microsoft.PowerShell_p
rofile.ps1 檔案。如需詳細資訊，請參閱 about_Execution_Policies，網址為 https:/go.microsoft.com/fwlink/?LinkID=135170。
位於 線路:1 字元:3
+ . 'C:\Users\Hsiangfeng\Documents\WindowsPowerShell\Microsoft.PowerShe ...
+   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

#### step 01
#### step 02

此時你不用害怕，按下「A」就可以了，因為我們目前要更改的原則是 「RemoteSigned」，在前面有說過這個執行原則是「可以使用本機所撰寫的腳本檔案，不需要簽署就可以執行，但是從遠端下載的腳本就必須經由可信任的發行者簽署後才可以執行。」，因此安全性是較好的。

當你按下 「A」，你就可以再去試試看執行 npm 、vue 、 gulp 以及 webpack 等等指令囉～

記得終端機要全部關閉在開啟，這樣子效果才能夠正常使用以上指令唷。

成功!!

**方法 2–2：建立 Vue 專案**
`vue create my-project`

>後面 my-project 的部分代表你要新建的專案名稱
>
<br>



<br>

Vue CLI 工具會詢問你希望建立 Vue2 還是 Vue3 的專案，又或者是你想自行手動選擇版本、手動設定套件。
1. 上下鍵控制當前選項位置，
2. 按 Space 鍵即代表控制選取/不選取。
3. 按 Enter 鍵即代表選完並繼續下一步。


https://medium.com/anna-hsaio-%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC%E8%A8%98/webpack-%E6%95%99%E5%AD%B8-package-json%E8%88%87webpack-config-js%E8%A8%AD%E5%AE%9A%E6%96%87%E4%BB%B6%E8%AA%AA%E6%98%8E-f749e4747b04

<br>

安裝成功之後我們會看這個畫面，它提示我們輸入 `cd my-project` 進入我們的專案資料夾，並輸入指令 `yarn serve` ( 或是` npm run serve` ) 啟動 server。


### 拆分component

Vue.js 很大的優點就是能將頁面 UI 元件模組化。一頁一檔、維護有方。由以上需求，我們在/src資料夾下建一個/components資料夾，裡面建立各頁面的 vue 檔長這樣：

└ components
  ├ Login.vue
  ├ Header.vue
  ├ Home.vue
  └ UserInfo.vue

而在單頁應用SPA，達成這些頁面的切換就是路由的範疇，是該 vue-router 出場了。

### 路由必備 vue-router

vue 官方提供 vue-router(文件) 幫助我們實現 routing ，安裝成專案的 dependency：

個人傾向將路由規則獨立一個檔案管理，在/src資料夾下新建一個 routes.js。裡面先寫好簡單的兩個路由：

routes.js

import Login from './components/Login.vue';
import Home from './components/Home.vue';

export const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    component: Home
  }
];

>這段想寫在main.js裡也行，只要讓 router 帶入正確的 routes array 就好，這裡只是 export 出來

https://yuugou727.github.io/blog/2017/11/11/vue-login-practice/

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import { routes } from './routes' //路由規則

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
  //vue-router 預設使用 # 字模擬 anchor 的 url 導向方式，
  //避免整頁刷新，這裡改成 history mode 
  //以呈現乾淨的 url path，相應的 server 端也
  //必須設定總是回應index.html的內容
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

### 所見所得

將App.vue中頁面加入<router-view>，路由規則定義的 component 將會 mount 在上面：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
  }
</script>