---
# System prepended metadata

title: Vue 學習心得
tags: [JavaScript, js]

---

Vue 學習心得
===
###### tags: `JavaScript` `js`

參考: 
[利用vuetify & firebase資料庫打造todo-list!(30 Days challenge-12)](https://eruditeness.news.blog/2020/02/07/利用vuetify-firebase資料庫打造todo-list30-days-challenge-12/)
[VueJS 快速入門](https://ithelp.ithome.com.tw/articles/10213178)
[Vue 入門](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)

# 手打 html 快速建立 vue 專案
## 建立 index.html 引用 vue.js
建立 html 檔案 vscode 輸入 shift+!

## 簡單的綁定資料
```htmlmixed=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <p id="msg">{{message}}</p>

    <script>
        var v = new Vue({
            el:'#msg',
            data:{
                message:'this is Vue.js sample!'
            }
        })
    </script>
    
</body>
</html>
```
雙大刮號 是我們要讓 vue 取代的變數名稱
```htmlmixed=
<p id="msg">{{message}}</p>
```
如上的 `{{message}}`
對應 Vue 的 message 變數
```htmlmixed=
<script>
        var v = new Vue({
            el:'#msg',
            data:{
                message:'this is Vue.js sample!'
            }
        })
</script>
```
el 是指定 selector 找 id="msg" 的物件

---

## 透過 npm 或 bower 安裝 vue cli
想透過 npm 或 bower 安裝 vue 可以下指令
```bash=
npm install --global @vue/cli
```
或
```bash=
yarn global add @vue/cli
```
安裝 vue cli 的套件

# 用 vue-cli 快速建立專案
```bash=
vue create first-vue
```
建好目錄直接用下面指令建vue專案
```bash=
vue create .
```
![successfully created project](https://i.imgur.com/zbJB0Zn.png)
```bash=
npm run serve
```
執行 vue 專案
![npm run serve](https://i.imgur.com/Qz6NuPW.png)
選 `http://192.168.0.53:8080/` Ctrl + 滑鼠點擊
![html](https://i.imgur.com/JmLchoB.png)

---

參考: [Vue 3 - 認識框架](https://ithelp.ithome.com.tw/articles/10277079)
VSCode 安裝一下 ==Vetur== 套件
[vue文件提示: No Babel config file detected](https://ask.csdn.net/questions/7403242)
在 .eslintrc.json 新增
```json=
"parser": "@babel/eslint-parser",
    "parserOptions": {
      "requireConfigFile": "false"
    }
```
如下:
```json=
"parserOptions": {
    "ecmaVersion": 12,
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "requireConfigFile": "false"
    }
```
.gitignore
```json=
.DS_Store
node_modules/
/dist/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
```
---

## 自學筆記
[java script 學習心得（vscode）](https://hackmd.io/@chiisen/rJ-Tqmfo8)
[Angular 學習心得](https://hackmd.io/@chiisen/SJLZQUph8)
[React 學習心得](https://hackmd.io/@chiisen/Sywk4upnI)


## 參考資料
[【跟山地人学Vue Router系列教程】课01.新手5分钟上手VueRouter](https://www.youtube.com/watch?v=SSCODRlstRg)
[Vue Router](https://router.vuejs.org/zh/guide/#html)
[Vue.js 快速入门](https://m.html.cn/web/vue-js/10736.html)
[網頁設計靠 Vue.js 轉前端 系列](https://ithelp.ithome.com.tw/users/20111956/ironman/1784)

