[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)](https://www.kancloud.cn/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对象 }) } ```