vue-cli

本文详细介绍了在掌握Vue技术栈过程中所需的知识,包括设计模式、JS底层概念、vue-cli2与vue-cli3的区别,以及vue.config.js、vuex、vue-router等核心组件的使用。还探讨了process.env的环境变量、less预处理器、element-ui、axios和vue-lazyload的集成。同时,提到了如何处理fastclick和NProgress来优化用户体验。
摘要由CSDN通过智能技术生成

要掌握的知识如下

设计模式
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';
    
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值