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 2 渐进式前端框架 的最佳学习方法

Vue 浅谈前端js框架vue（挺详细的）

Vue.js 快速入门