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)