vue学习笔记（一）（vue webpack+vue-router+nodeJs npm）

该博客只是记录我自己使用vue-cli搭建一个vueJs项目，以及慢慢的完成一个项目的过程，主要记录心得与重要知识，由于自己半年前才转入前端，在之前有一些基础，在开始做vuejs项目之前已经明白nodeJs和vueJs的基本用法，所以，这里废话不多说，直接上步骤:

1.vue-cli 是vue的脚手架工具，主要有：（1）目录结构 （2）本地调试（3）代码部署（4）热加载 （5）单元测试

           vue-cli 安装：

                 1.首先确定自己的电脑已经安装nodejs,如果安装，可以通过命令：node -v 查看nodejs版本号(至于npm安装慢，这个在nodeJs教程中有详细解决，这里不记载了http://www.runoob.com/nodejs/nodejs-tutorial.html)

 2.全局安装vue-cli：npm install -g vue-cli 

 3.查看vue是否安装成功 vue,显示如图代表成功安装，我们就可以安装webpack了

4.vue init webpack  project(项目包名 ):安装过程中系统会询问哪些需要安装，哪些不需要安装，根据自己的需求来选择就ok，这里默认安装到c盘，在我这安装完成后项目存放在：C:\Users\user\project，具体如图：

5.cd project :进入刚刚创建好的项目中

6.npm install ：安装nodejs所需要的包

7.npm run rev ： 运用nodeJs运行项目，运行成功后会自动打开网页

好了，自己搭建项目完毕，就开始啃这个项目吧，我这是用的vue2.3.0版本，看了哈，跟其他版本写法上不一样，这些就可以直接参考最新文档了，然后我打开我这边的项目，目录结构如下图：

其中build和config文件是属于webpack，node_modules是nodejs中的一些包，库

src下就是我们的重点了：

main.js是入口，components文件夹下放的就是vue写的组件，router文件就是路由啦，到这里，整个入门就算完了，，本人小白一枚，该博客是自己学习的一些心得和体会，好让以后回顾

最后在哆嗦一点：如果没有看nodejs和vuejs基础的看过来：

nodejs:http://www.runoob.com/nodejs/nodejs-tutorial.html

                vuejs菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html

还有在项目中有用到webpack和vue-router

webpack教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

vue-router:http://router.vuejs.org/zh-cn/essentials/nested-routes.html

在这里也推荐一篇入门vue不错的博客（里面含有sublime text3配置）http://www.cnblogs.com/bluedoctor/p/5885148.html