[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對象
})
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request