vue学习起步:了解下
渐进式
有这么一句话,vue是渐进式框架。
抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?中的解释:
渐进式代表的含义是:主张(主张指使用时的硬性要求)最少。来个对比就知道什么叫主张最少:
比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:
- 必须使用它的模块机制
- 必须使用它的依赖注入
- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)
而使用vue使用,你可以只用它的一部分,不是说你必须一竿子把所有的东西都用上。你可以在原有大系统的上面,把一两个组件改用它实现,把它当jQuery用;也可以整个用它全家桶开发,把它当Angular用;
还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念。也可以函数式,都可以。
脚手架概念
在生活中含义是为了保证各施工过程顺利进行而搭设的工作平台,因此作为一个工作平台,前端的脚手架可以理解为能够帮助我们快速构建前端项目的一个工具或者平台。目前很多主流的前端框架都提供了各自官方的脚手架工具,以帮助开发者快速构建起自己的项目,比如 Vue、React 等, Vue 的脚手架工具 vue-cli。
文件路径写法
- 以
/为起始,表示从根目录开始解析; - 以
./为起始,表示从当前目录开始解析; - 以
../为起始,表示从上级目录开始解析;
以@开头的文件路径:
@/这是webpack设置的路径别名,resolve里面有一个alias的配置项目,能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,我们最好可以直接指定它们的位置,这样方便我们查找。
该文件在目录build/webpack.base.conf这个文件里面。该项配置具体讲解参考:resolve.alias
resolve: {
// 路径别名
alias: {
'@': resolve('src'),
'vue$': 'vue/dist/vue.esm.js'
}
}
__dirname代表当前模块文件所在的文件夹路径,__filename代表当前模块文件所在的文件夹路径+文件名
运行和编译的概念,对于模块加载:ES6、CommonJS、AMD、CMD的区别
戳来连接:对于模块加载:ES6、CommonJS、AMD、CMD的区别
Vue中的import
//以下import代码在main.js文件中
import Vue from 'vue';
//完整的写法
import Vue from "../node_modules/vue/dist/vue.js";
// 因为main.js是在src文件中,所以../向前一级相对目录查找node_modules,再依次寻找后面的文件。 import App from './App';
//完整的写法
import App from './App.vue'; import router from './route';
//完整的写法
import router from './route.js'; import axios from 'axios';
//完整的写法
import axios from '..\node_modules\axios\dist\axios.js'; import './less/index';
//完整的写法
import './less/index.less';
1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios这样的包名,则会自动到node_modules中加载;若给出相对路径及文件前缀,则到指定位置寻找。
2.可以加载各种各样的文件:.js、.vue、.less等等。
学习路线
碰到紧急项目挪别人的vue项目过来直接改,如何快速上手也去网上搜了一波,但是还不够快,这次就总结了自己的快速上手经验:如何快速上手一个新技术之vue学习经验
介绍两篇大概介绍vue使用的文章:
Vue 浅谈前端js框架vue(挺详细的)
vue学习起步:了解下的更多相关文章
- vue学习起步,vue环境安装
vue安装的前提是安装了nodejs 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack c ...
- 六 Vue学习 首页 (下)
一:Store介绍: state: 相当于数据 action: action去commit mutations mutation: 只有mutation 才能改变state 例: const stor ...
- vue学习之路 - 4.基本操作(下)
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- Vue 学习文档
Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- 如何快速上手一个新技术之vue学习经验
碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...
随机推荐
- 训练题(代码未检验)(序列前k大和问题)
大厦 Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submission ...
- 51nod 1092(lcs)回文字符串
题目:给你一个字符串,问添加最少的字符数目,使之成为回文串 解题思路:将字符串倒置,求出字符串和倒置串的最长公共子序列,字符串的长度减去lcs的长度就是了.. 代码:#include<iostr ...
- python----内置函数2与匿名函数
1.迭代器生成器相关 range:创建一个可迭代对象,一般与for混合使用,可设置步长. for i in range(0,10,2): #步长2范围为0-10不包括10 print(i) # 0 2 ...
- Python面向对象静态方法,类方法,属性方法
Python面向对象静态方法,类方法,属性方法 属性: 公有属性 (属于类,每个类一份) 普通属性 (属于对象,每个对象一份) 私有属性 (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法: ...
- Ubuntu 16.04安装Maven
此篇为http://www.cnblogs.com/EasonJim/p/7139275.html的分支页. 前提:必须正确安装JDK. 一.通过二进制包(tar.gz)安装 下载: 进入下载列表:h ...
- BZOJ5361[Lydsy1805月赛]对称数——主席树+随机化
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=5361 好神的一道题啊! 容易看出来是要用维护权值的数据结构,因此树链剖分首先pass掉. ...
- POI插入图片至Excel使用固定的长宽
使用POI在Excel里插入图片,如何使插入的图片使用固定的大小?先介绍原有的两种方式: 一种是指定开始和结尾单元格,然后从头画到尾,相当于平铺 还有一种就是仅指定开始的单元格,图片的大小跟这个单元格 ...
- day23 序列化模块
概念: 序列化 -- 其他数据类型转换成一个字符串数据类型 反序列化 -- 字符串转换成其他数据类型 序列 -- 字符串 必须要转换成字符串的场景: 往文件里面写数据的时候只能写字符串,不能写字典的 ...
- 洛谷 P4211 [LNOI2014]LCA 解题报告
[LNOI2014]LCA 题意 给一个\(n(\le 50000)\)节点的有根树,询问\(l,r,z\),求\(\sum_{l\le i\le r}dep[lca(i,z)]\) 一直想启发式合并 ...
- 洛谷 P1120 小木棍 [数据加强版]解题报告
P1120 小木棍 [数据加强版] 题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它 ...