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

1、如何学习VUE

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

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

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

　　　　　　　　setInterval(()=>)

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

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

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

　　　　　　五、（一星）模块化

80%经常使用核心，搞定！

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

 

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

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

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

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

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

四、下载官方最新的webstrom，网上能够找到方法自行破解

五、打开webstrom，open工程所在的那个目录，就能够编辑啦！

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

 

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

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

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

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

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

 

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

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

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