今天我们来学习一下Vue CLI脚手架，本文主要是总结Vue CLI脚手架搭建过程及总结遇到的问题，跟着我一起来学习吧~

1.node.js安装与环境配置

1.1 node.js安装

• 安装包下载地址：https://nodejs.org/en/

• 下载完成后，双击node-v10.16.0-x64.msi，开始安装Node.js，全程默认一直点击下一步（注意：安装地址最后不要默认选择C盘，选择D盘），安装完毕后点击finish结束安装进程，然后在VS code终端，依次输入命令：

  1 2	node -v npm -v

• 如果正确输出版本号，说明我们的NodeJS和NPM就安装好了，如下图所示：
  

• 此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

今天我们来学习一下Echarts，本文主要是总结自定义构建Echarts遇到的问题，跟着我一起来学习吧~

1.使用命令行，创建自己的工程：

1
2

mkdir myProject
cd myProject

2.在 myProject 目录下使用命令行，初始化工程的 npm 环境并安装 echarts（这里前提是您已经安装了 npm）：

1
2

npm init
npm install echarts --save

今天我们来学习一下Echarts，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架，本文基于Vue CLI脚手架，来实现Echarts的引用，跟着我一起来学习吧~

一.引入一个简单的图表

首先npm安装Echarts

npm install echarts --save

接下来打开public->src->main.js来引入echarts

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

作为前端必备知识点，flex为我们页面布局提供了灵活性，今天我们来学一下flex布局吧~

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局， Webkit内核的浏览器，必须加上-webkit前缀。

1
2
3

.box{    
display: -webkit-flex; /* Safari */    
display: flex;}注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、Flex布局基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

• 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
• 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
• 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
• 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

VScode快捷键：

https://blog.csdn.net/hypon2016/article/details/80831266

VScode快捷键：

• Auto Close Tag ：自动闭合 HTML/XML 标签
• Auto Rename Tag ：自动重命名成对的 HTML/XML 标签
• Babel ES6/ES7 ： 添加 ES6/ES7 语法的颜色提醒
• Canvas Snippets ：Canvas 代码片段提示
• Bracket Pair Colorizer ：多层括号颜色匹配
• CSS peek ：可直接在 HTML 中查看 class、id 对应的 CSS 样式，并可以直接跳转
• Document This ： JSDoc comments for both TypeScript and JavaScript
• filesize ：编辑器左下角显示文件大小
• git history、gitlens ： git 使用必备，能够图形化显示 git 历史、编辑人物等
• HTML CSS support ： HTML、CSS 快捷操作
• HTML Snippets ： HTML 代码片段
• Htmltagwrap ： 选中代码快速增加 html 标签 - alt + w
• Image Preview ： 代码中直接显示图片缩略图
• Import Cost ：显示 import、require 引用的包的大小

转载自：https://www.cnblogs.com/zhanglianghhh/p/9706852.html

Chrome浏览器阻止跨域配置：

–disable-web-security –user-data-dir=C:\ChromeDebug

自动跳转原因

将HTTP请求自动转为HTTPS请求是浏览器的默认策略。当浏览器访问过某个HTTPS的网站后，再访问该网站时，一切HTTP请求会自动转为HTTPS请求。
HTTP转为HTTPS的主要原因是为了安全。

Chrome 浏览器

1. 地址栏中输入 chrome://net-internals/#hsts
2. 在 Delete domain security policies 中输入项目的域名，并 Delete 删除
3. 可以在 Query domain 测试是否删除成功

这里如果还是不行， 请清除浏览器缓存！
参考文章 :如何关闭浏览器的HSTS功能

Safari 浏览器

1. 完全关闭 Safari
2. 删除 ~/Library/Cookies/HSTS.plist 这个文件
3. 重新打开 Safari 即可
4. 极少数情况下，需要重启系统

Opera 浏览器

和 Chrome 方法一样Firefox 浏览器

1. 关闭所有已打开的页面
2. 清空历史记录和缓存
3. 地址栏输入 about:permissions
4. 搜索项目域名，并点击 Forget About This Site

Vue.js学习笔记Day5-5.08

今日主要学习内容：

• 复习父子组件传值问题；
• watch、computed和methods之间的对比；
• nrm的安装使用；
• Webpack的概念；
• 使用vue实例的render方法渲染组件；
• 在普通页面中使用render函数渲染组件；
• export default 和 export 使用方式；
• 在vue组件页面中，集成vue-router路由模块；
• 组件中css作用域问题（scoped属性）

开始Vue框架的学习吧～

Vue.js学习笔记Day4-5.06

今日主要学习内容：

• 使父组件向子组件传值；
• 子组件向父组件传值；
• 评论列表案例；
• 使用 this.$refs 来获取元素和组件；
• 什么是路由；
• 设置路由高亮；
• 设置路由高亮设置路由切换动效；
• 在路由规则中定义参数；
• 使用 children 属性实现路由嵌套；
• 命名视图实现经典布局；

开始Vue框架的学习吧～

Vue.js学习笔记Day3-4.29

今日主要学习内容：

• 使用Vue-resource实现品牌的增删查功能；
• Vue中的动画；
  1. 使用过渡类名实现动画
  2. 使用第三方 CSS 动画库
  3. 使用动画钩子函数
  4. v-for 的列表过渡
• 使用定义Vue组件；
  1. 什么是组件
  2. 组件化和模块化的不同
  3. 全局组件定义的三种方式
  4. 组件中展示数据和响应事件
  5. 使用components属性定义局部子组件
  6. 两种切换组件方法

开始和我一起Vue框架的学习吧～

Vue.js学习笔记Day2-4.24

今日主要学习内容：

• 品牌列表案例；
• 全局过滤器和私有过滤器；
• 自定义按键修饰符；
• 自定义指令；
• Vue实例的生命周期；
• vue-resource 实现 get, post, jsonp请求；
• 配置本地数据库和数据接口API；

开始Vue框架的学习吧～