vue-cli

要掌握的知识如下

设计模式
qrcode
less, sass, scss, stylus
浏览器原理
node.js
import, require
webpack
vue
vue.config.js
vue-cli3
vuex
vue-router
vue-axios, axios
vue-lazyload
fastclick
NProgress
element-ui
AntDesignVue
vue-awesome-swiper, swiper
eslint
git

---

js底层 (没有系统学习, 瞎琢磨的)

函数即对象: 因为函数除了可以作为函数之外, 函数还可以有属性和方法

构造函数: 有this的才叫构造函数

下面这个是通过{}创建出来的, 用{}创建跟用Object构造函数创建一样, 所以该创建该对象的构造函数是Object而不是Juln

对prototype和__proto__的理解: 首先只需要知道三个东西, 构造函数, 实例对象, 原型对象.
每个构造函数都有一个原型对象, 实例对象与实例对象的数据都是独立各一份的, 由于它们之间无法共享数据, 所以就需要一个桥梁来共享, 那就是原型对象. 另外: 实例对象.__ proto __ === 构造函数.prototype; 构造函数.prototype === 原型对象; 通过上面这两个公式还可以推出下面三个(但非常情况会失效): 实例对象.__ proto __ === 原型对象; 原型对象.constructor === 构造函数; 构造函数.prototype.constructor === 构造函数
因此, 实例对象有两种属性, 一种是本身的属性, 一种是通过引用(原型对象身上的属性)得来的属性, 而这种引用属性是共享的, 只要这几个实例对象的原型对象是同一个就行.
以上说的非常情况比如: 你把原型对象下的constructor设置为其它值, 只要不是构造函数就行, 这样一来原型对象下就没有这个构造函数了, 因此再通过该构造函数创建出来的实例对象就失去数据共享的功能了. 或者直接把原型对象替换成其他的原型对象, 那么 实例对象.__ proto __ 就会指向其他原型对象, 因为 实例对象.__ proto __ 是永远 === 构造函数.prototype 的.

总结如下: 声明函数时, 系统会在内存中创建出一个空对象, 并把函数的原型对象指向这个空对象, 然后把空对象的构造函数指向函数本身. 创建对象时, 系统会将创建对象的原型对象指向构造函数的原型对象.

---

vue-cli2和vue-cli3的区别

https://www.cnblogs.com/webdragon/p/11025921.html

网上很多vue-cli2和vue-cli3混合在一起的博文, 但大部分都没写是哪个版本的

vue-cli3的两种创建方式: vue ui 和 vue create 项目名
vue-cli3相比vue-cli2少了很多配置. build、config这些配置文件不开放了。但可以在根目录下创建一个 vue.config.js 文件存放配置。https://cli.vuejs.org/zh/guide/webpack.html

---

process.env

process.env.NODE_ENV - 会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
process.env.BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

---

vue技术栈

less

1. npm i less less-loader -D
2. vue文件中 <style lang="less" rel="stylesheet/less" scoped>即可使用

element-ui

1. npm i element-ui -S 或 vue add element
2. 全部导入 (不推荐):
   在main.js下

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   

3. 按需导入 (推荐, 但按需导入全部和全部导入一样):
   在 vue文件的script顶部

   import Vue from 'vue'
   import { Button, Select } from 'element-ui'
   Vue.use(Button)
   Vue.use(Select)
   /* 或写为
   Vue.component(Button.name,Button)
   Vue.component(Select.name,Select)
   

axios

1. npm i axios -S
2. 在main.js下

   import axios from 'axios'
   Vue.prototype.$http = axios
   

axios & vue-axios

1. npm i axios vue-axios -S
2. 在main.js下

   import vueAxios from 'vue-axios'
   import axios from 'axios'
   Vue.use(vueAxios,axios)
   // 基础请求路径。非生产环境 && 开启代理, 接口前缀统一使用[/api]前缀做代理拦截!
   axios.defaults.baseURL = process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : process.env.VUE_APP_SERVER_URL;
   // 超时时间
   axios.defaults.timeout = 100000
   // 跨域请求，允许保存cookie
   axios.defaults.withCredentials = true
   // axios.defaults.headers = {'Content-Type': 'application/json; charset=utf-8'}
   axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
   

vue-awesome-swiper, swiper

不要用新版本的, 官网没说明新版本的用法

vue-lazyload

详细说明看这个: https://segmentfault.com/a/1190000014928116

1. npm i vue-lazyload -D (或使用CDN https://unpkg.com/vue-lazyload/vue-lazyload.js")

2. 在main.js下

   import VueLazyload from 'vue-lazyload'
   Vue.use(VueLazyload, {
     preLoad: 1.3,
     error: require('@/assets/img/error.png'),
     loading: require('@/assets/img/loading.gif'),
     attempt: 3, // 尝试请求次数, 默认为3
     listenEvents: [ 'scroll' ], // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
   })
   

   参数表:
   

3. 在vue中

   <img v-lazy='/static/img1.jpg' alt="" />
   

fastclick

1. npm install fastclick -S
2. 在main.js下

   import FastClick from 'fastclick'
   // 当使用FastClick 时，input框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透. 下面代码解决这个问题
   FastClick.prototype.onTouchEnd = function(event) {
   	if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "text") {
   		event.preventDefault()　
   		return false
   	}
   }
   FastClick.attach(document.body) // 全局引入
   

3. 局部取消fastclick来立刻触发点击事件

   <a class="needsclick">Ignored by FastClick</a>
   

NProgress

1. npm install NProgress -S
2. router.js下

   router.beforeEach( (to,from,next) => {
     if(to.path === from.path) return next();
     NProgress.start();
     next();
   });
   
   router.afterEach( () => {
     NProgress.done();
   })
   

element-china-area-data

https://github.com/Plortinus/element-china-area-data

cross-env

略…