Vue.js框架学习与工程搭建

一、如何学习VUE

第一步：学好ES6，ECMAScript顺便把NodeJS也学会了。

第二步：如何学ES6，看阮一峰教授的教程（http://es6.ruanyifeng.com/），先中文后英文，上网看看思路，实战。

　　难点：   1、（五星）函数的拓展，箭头函数，语法特别多

　　　　　　　　setInterval(()=>)

　　　　　　2、（五星）Generator生成器函数，花个10小时或者2天看懂

　　　　　　3、（一星）对象，类，面向对象

　　　　　　4、（一星）promise,核心，微信开发，nodejs

　　　　　　5、（一星）模块化

80%常用核心，搞定！

Vue.js手册学习（https://cn.vuejs.org/v2/guide/）：2周左右看明白。

 

二、工程项目的搭建（利用vue-cli脚手架搭建）

1、无脑官网下载并安装最新的node

2、在任意文件夹下，shift+鼠标右击，打开命令窗口，输入指令：npm install -g vue-cli

3、在希望建立工程文件的目录下，shift+鼠标右击，打开命令窗口，输入指令：vue init webpack 工程名

恭喜，这时候你已经完成项目的框架搭建！

4、下载官方最新的webstrom，网上可以找到方法自行破解

5、打开webstrom，open工程所在的那个目录，就可以编辑啦！

6、在工程目录下，shift+鼠标右击，打开命令窗口，输入指令：npm run dev    命令窗口最终会给出一个网站，你运行一下就可以看到它默认的单页应用效果

 

三、项目目录的一些解释，不完整

src目录下的文件及文件夹解释

　　1、asset文件夹下存放静态资源：图片、css、js

　　2、App.vue包括template、script、style三个部分，其它vue文件可以复制过来修改，export导出该模块，需有name

　　3、main.js导入各.vue文件的模块，实例化vue

 

适合场景：单页应用，数据驱动性模板，对DOM频繁操作，（弹幕系统，微信应用，在线即时聊天，上一页下一页，画图游戏）

不适合：OA,企业网站（纯html开发更快）

初次打开单页应用界面会比较慢，但是一旦打开了，操作就是搭飞机一样流畅。（打开的速度取决于网速了）