渐进式

有这么一句话,vue是渐进式框架。

抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?中的解释:

渐进式代表的含义是:主张(主张指使用时的硬性要求)最少。来个对比就知道什么叫主张最少:

比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:

  • 必须使用它的模块机制
  • 必须使用它的依赖注入
  • 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

而使用vue使用,你可以只用它的一部分,不是说你必须一竿子把所有的东西都用上。你可以在原有大系统的上面,把一两个组件改用它实现,把它当jQuery用;也可以整个用它全家桶开发,把它当Angular用;
还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念。也可以函数式,都可以。

脚手架概念

在生活中含义是为了保证各施工过程顺利进行而搭设的工作平台,因此作为一个工作平台,前端的脚手架可以理解为能够帮助我们快速构建前端项目的一个工具或者平台。目前很多主流的前端框架都提供了各自官方的脚手架工具,以帮助开发者快速构建起自己的项目,比如 Vue、React 等, Vue 的脚手架工具 vue-cli

文件路径写法

  • / 为起始,表示从根目录开始解析;
  • ./ 为起始,表示从当前目录开始解析;
  • ../ 为起始,表示从上级目录开始解析;

以@开头的文件路径:

@/这是webpack设置的路径别名,resolve里面有一个alias的配置项目,能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,我们最好可以直接指定它们的位置,这样方便我们查找。
该文件在目录build/webpack.base.conf这个文件里面。该项配置具体讲解参考:resolve.alias

  1. resolve: {
  2. // 路径别名
  3. alias: {
  4. '@': resolve('src'),
  5. 'vue$': 'vue/dist/vue.esm.js'
  6. }
    }

__dirname代表当前模块文件所在的文件夹路径,__filename代表当前模块文件所在的文件夹路径+文件名

运行和编译的概念,对于模块加载:ES6、CommonJS、AMD、CMD的区别

戳来连接:对于模块加载:ES6、CommonJS、AMD、CMD的区别

Vue中的import

  1. //以下import代码在main.js文件中
  2. import Vue from 'vue';
  3. //完整的写法
  4. import Vue from "../node_modules/vue/dist/vue.js";
  5. // 因为main.js是在src文件中,所以../向前一级相对目录查找node_modules,再依次寻找后面的文件。
  6.  
  7. import App from './App';
  8. //完整的写法
  9. import App from './App.vue';
  10.  
  11. import router from './route';
  12. //完整的写法
  13. import router from './route.js';
  14.  
  15. import axios from 'axios';
  16. //完整的写法
  17. import axios from '..\node_modules\axios\dist\axios.js';
  18.  
  19. import './less/index';
  20. //完整的写法
  21. import './less/index.less';

1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios这样的包名,则会自动到node_modules中加载;若给出相对路径及文件前缀,则到指定位置寻找。
2.可以加载各种各样的文件:.js、.vue、.less等等。

学习路线

  碰到紧急项目挪别人的vue项目过来直接改,如何快速上手也去网上搜了一波,但是还不够快,这次就总结了自己的快速上手经验:如何快速上手一个新技术之vue学习经验

介绍两篇大概介绍vue使用的文章:

Vue.js 2 渐进式前端框架 的最佳学习方法

Vue 浅谈前端js框架vue(挺详细的)

Vue.js 快速入门

vue学习起步:了解下的更多相关文章

  1. vue学习起步,vue环境安装

    vue安装的前提是安装了nodejs 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack c ...

  2. 六 Vue学习 首页 (下)

    一:Store介绍: state: 相当于数据 action: action去commit mutations mutation: 只有mutation 才能改变state 例: const stor ...

  3. vue学习之路 - 4.基本操作(下)

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  4. Vue 学习文档

    Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...

  5. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  6. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  9. 如何快速上手一个新技术之vue学习经验

    碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...

随机推荐

  1. codeforces279B

    Books CodeForces - 279B When Valera has got some free time, he goes to the library to read some book ...

  2. 当你觉得大学没学到Linux时的感想

    你的大学生活是什么样的呢?你在大学有学到特殊的技能吗?你可以在大学毕业的时候找到一份满意的工作吗?当这些问题摆在你面前的时候,你会迷茫吗,绝大多数的人在毕业的时候并不能找到一份好的工作,那不是因为你的 ...

  3. BZOJ4836 二元运算(分治FFT)

    设A(n)为a中n的个数,B(n)为b中n的个数.如果只考虑加法显然是一个卷积,减法翻转一下也显然是一个卷积. 问题在于两者都有.容易想到分开处理.那么可以考虑分治.即对于值域区间[l,r],分别计算 ...

  4. 【POJ1456】Supermarket(贪心)

    BUPT2017 wintertraining(16) #4 F POJ - 1456 题意 每个商品有过期日期和价格,每天可以卖一个商品,必须在过期前出售才能收益,求最大收益. 题解 贪心,按价格排 ...

  5. Mysql 主从服务器数据同步

    安装2台windows Server 服务器,分别安装Mysql,配置环境变量,完成安装确认在CMD窗口可以使用Mysql命令 在Master服务器上创建同步账号,确保Slave服务器能访问Maste ...

  6. Word Ladder - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Word Ladder - LeetCode 注意点 每一个变化的字母都要在wordList中 解法 解法一:bfs.类似走迷宫,有26个方向(即26个字 ...

  7. C# 类&结构体&枚举

    类: class Lei  //要和static void Main(string[] args)平级: { public int lei_int;  //public是关键字,代表访问权限,这里是公 ...

  8. A1091. Acute Stroke

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  9. laravel redis 删除指定前缀的 key

    // 前缀 $prefix = 'abc'; // 需要在前面连接上应用的缓存前缀 $keys = app('redis')->keys(config('cache.prefix') . $pr ...

  10. JS模板引擎handlebars.js的简单使用

    handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...