章節連結
這篇主要是筆記下如何快速的在本機端生成一個 Vue.js 的專案，並結合 Bootstrap 和 Node.js 二者來產生一個前後端兼備但卻彼此分離的網路應用程式。
步驟
Vue.js 框架下，其網址多半會帶有 # 字樣。這是因為在 Hash mode 下，前端的伺服器(Vue Router) 是用 windows.onhashchange 來監聽路徑。這路徑為瀏覽器統一向網頁的根目錄送出請求，然後辨認路由位置。若是使用 history mode 發佈，那麼需在後端的伺服器設定頁面導向，才能避免出現 404 畫面。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// 1. 全域安裝 Vue.cli 工具，這樣就不用每個使用者都要重裝一次框架 $ npm install -g @vue/cli // 2. 確認版本號(是否安裝成功) $ vue --version // 3. 切換到要安裝的資料夾，並建立一個新專案(像是 newProject) $ vue create newProject // 4. 啟動專案 $ cd newProject $ npm run newProject // 5. 安裝前端路由器，並「不要選用」history mode，而用 hash mode $ vue add router // 6. 安裝 bootstrap $ npm install bootstrap $ npm install --save jquery popper.js // 7. 載入 bootstrap 對應的套件(jQuery等) // ./src/App.vue <script> import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' export default { name: 'App' } </script> // 8. 啟動 console.log 功能 { "name": "client", "version": "0.1.0", "eslintConfig": { "root": true, ............, "rules": { "no-console": "off" }, ............ }, "browserslist": [ "> 1%", "last 2 versions" ] } |
![[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer](https://smlpoints.com/wp-content/uploads/notes-multer-formdata-instead-of-body-parser-1.jpg "[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer")
![[筆記] Alpha Camp 第四學期 期末回顧之三 – 專案發表後](https://smlpoints.com/wp-content/uploads/alpha-camp-semester-1-warm-up-2019.jpg "[筆記] Alpha Camp 第四學期 期末回顧之三 – 專案發表後")
![[筆記] Node.js 在 Windows 上的開發環境建置](https://smlpoints.com/wp-content/uploads/notes-how-to-set-the-environment-for-nodejs-on-windows-1.jpg "[筆記] Node.js 在 Windows 上的開發環境建置")
![[筆記] Sequelize NodeJS 專案初始化筆記](https://smlpoints.com/wp-content/uploads/notes-sequelize-node-js-initialize-projects-1.jpg "[筆記] Sequelize NodeJS 專案初始化筆記")
![[筆記] Heroku Sequelize 佈署細節](https://smlpoints.com/wp-content/uploads/notes-heroku-sequelize-1.jpg "[筆記] Heroku Sequelize 佈署細節")
![[筆記] 運用 Heroku 佈署的初始化步驟](https://smlpoints.com/wp-content/uploads/notes-heroku-deployment-how-to-deploy-git-subdirectory-to-heroku-1.jpg "[筆記] 運用 Heroku 佈署的初始化步驟")
![[筆記] Alpha Camp 第三學期 期末回顧 關於自學](https://smlpoints.com/wp-content/uploads/alpha-camp-semester-3-2019-reflection-self-study-1.jpg "[筆記] Alpha Camp 第三學期 期末回顧 關於自學")
![[筆記] Handlebars Register Helper 自定義 Helper 用法](https://smlpoints.com/wp-content/uploads/notes-api-application-programming-interface-with-axios-dom-1.jpg "[筆記] Handlebars Register Helper 自定義 Helper 用法")
![[訪談記錄] 自身興趣和實作 在工作上找到歸屬感與成就](https://smlpoints.com/wp-content/uploads/alpha-camp-semester-2-third-interview-1.jpg "[訪談記錄] 自身興趣和實作 在工作上找到歸屬感與成就")
![[筆記] Git 忽略 .DS_Store 等排除檔案](https://smlpoints.com/wp-content/uploads/notes-git-ignore-ds_store-files-and-so-on-gitignore-1.jpg "[筆記] Git 忽略 .DS_Store 等排除檔案")
![[訪談記錄] 觀察、效能和成就感](https://smlpoints.com/wp-content/uploads/alpha-camp-semester-2-second-interview-1.jpg "[訪談記錄] 觀察、效能和成就感")
![[訪談記錄] 反思 試著對未來的職涯跨出一步](https://smlpoints.com/wp-content/uploads/the-reflection-based-on-the-first-interview-1.jpg "[訪談記錄] 反思 試著對未來的職涯跨出一步")
![[訪談記錄] 堅持加上興趣 在程式的世界中遨遊](https://smlpoints.com/wp-content/uploads/programming-career-interview-notes-to-insist-on-what-you-love-1.jpg "[訪談記錄] 堅持加上興趣 在程式的世界中遨遊")
