[TOC] ## :-: [vue - 安裝腳手架 (vue-cli3.0)](https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI) ``` npm install -g @vue/cli 安裝腳手架，用于生成項目、 npm install -g @vue/cli-service-global 快速原型開發，編譯.vue文件、 如果之前已經安裝過舊版本(非3.x)腳手架，需要先卸載舊版本、 npm uninstall vue-cli-g 如果仍然需要使用舊版本的 vue init 功能，可以全局安裝一個橋接工具、 nom install -g @vue/cli-init 拉取舊版本 插件名：Vetur ``` $`vue serve App.vue` -- 將vue文件編譯打包 ## :-: .vue 文件基本結構 ``` <template> <!-- 視圖 (html) --> <div>{{ msg }}</div> </template> <script> // 邏輯 (js) export default { data() { return { msg: "Hello World ~" }; } }; </script> <style> /* 樣式 (css) */ div { background-color: aqua; } </style> ``` ## :-: 引入自定義組件 :-: App.vue (主文件) ``` <template> <!-- 視圖 --> <div> <h1>{{ msg }}</h1> <test /> </div> </template> <script> // 邏輯 // 引入自定義組件、 import Test from "./Test"; export default { data() { return { msg: "Hello World ~" }; }, components: { Test } }; </script> <style> /* 樣式 */ div { width: 500px; text-align: center; border: 1px solid #333; } </style> ``` :-: Test.vue (被引入組件) ``` <template> <!-- 視圖 --> <h2>{{ test }}</h2> </template> <script> // 邏輯 export default { data() { return { test: "----- vue -----" }; } }; </script> <style> /* 樣式 */ h2 { color: red; } </style> ```  ***** ## :-: [網絡請求(Axios)](http://www.hmoore.net/yunye/axios/234845) ``` axios.get("https://xxx.com/xxx.php", { params: { key: xxx } }) .then((res) => { ··· },(err) => { ··· }); ``` ## :-: [axios 下載文件(自定義文件名)](https://www.jianshu.com/p/eb785e4318f4) ``` download(){ const url = "文件地址" axios.get(url,{ responseType:'blob' }).then( res => { let blob = new Blob([res.data]) let downloadElement = document.createElement('a') let href = window.URL.createObjectURL(blob); //創建下載的鏈接 downloadElement.href = href; downloadElement.download = `new name`; //下載后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //點擊下載 document.body.removeChild(downloadElement); //下載完成移除元素 window.URL.revokeObjectURL(href); //釋放blob對象 }) } ```