# Vue實作 ###### tags: `VueJS` 先載node.js，才能使用npm 完成後就可以使用npm-cli來呼叫各式各樣的動作 常用的是這個 ```bash= npm install ``` ## 安裝vue ```bash= npm install vue #最新穩定版 ``` ### 使用vue-cli ```bash= npm install -g @vue/cli ``` ### 跑網頁 ```bash= npm run serve or vue serve ``` ### 創專案 ```bash= vue create <project name> # 目前以vue 2.6版為穩定版本，vue3為最新版，許多套件是不支持vue3的，可以等日後套件跟上版本再更換版本 ``` ## 架構整理 裡面較常用到的資料夾有以下 ### 1. component 是一個拼圖的概念，在這邊可以創造想要的小模板，作為各個區塊的部件 ### 2. router 是路由及導向，控制頁面的切換 ### 3. App.vue 處理主畫面及入口的部分 ### 4. views 畫面組件，排版component的位置 ## vue結構 主要分三個部分 ``` <template> 寫html </template> <script> 寫javascript </script> <style> 寫css </style> ``` 很清晰易懂，就是把網頁拆解成小區塊來處理，解耦所有部件，達成改動時不會影響到其他部件。 ## 額外 請搭配[BootstrapVue](https://bootstrap-vue.org/)服用，效果更好。 可以節省很多切版的時間，只是要花點時間熟悉操作。 要引入BootstrapVue請先做 ```bash= npm install vue bootstrap bootstrap-vue ``` 並且在main.js裡面寫入 ```javascript= import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Import Bootstrap an BootstrapVue CSS files (order is important) import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' // Make BootstrapVue available throughout your project Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin) ``` 接下來就可以快速的實作網頁切版了！ 如果遇到BV無法插入本地圖片可在[**這裡**](https://bootstrap-vue.org/docs/reference/images)查詢