接触vue已经有一段时间了，从1.x到现在的2.x，进入了很多坑，也填过一些坑，基于自己的一些开发中遇到的问题，写给小白们一篇我的开发经验，毕竟我也是个小白；
首先，我使用的不是vue全家桶（vue+vue-router+vuex），我的项目基本配置是vue-cli+vue-router+axios或vue-cli+vue-router+jquery，样式控制由Less完成；
配置介绍：vue不用说了，vue-cli一个官方推荐的vue脚手架基于webpack我一直在使用，本文也是基于vue-cli的，vue-router路由，axios是一个类似于ajax的请求工具，jquery不必多说大部分前端工程师都在不厌其烦的使用着；
为什么不使用vuex：因为我暂时接触的项目都是中偏小型的，暂时用不上vuex的状态管理；
配置开发环境：
1﹜ 安装Vue-cli 在终端执行npm install –g vue-cli 如果mac系统安装失败请使用 sudo install –g vue-cli ，nodejs和npm的安装及配置本文不多陈述，安装过程如下图；
2﹜ 使用vue-cli 新建项目，打开终端找一个你打算存放项目的目录，随便一个目录都可以，在终端执行 vue init webpack vuecli ,PS:vuecli 是项目名称，实际开发中修改成你想用的项目名称即可；
Project name :项目名称，同项目初始化时的名称，如果不做修改直接enter；
Project description：项目描述，这个基本可以不用修改直接enter即可；
Author：作者，enter即可；
Runtime + Compiler: recommended for most users：enter即可；
Ininstall vue-router:是否安装vue-router，如果需要路由功能直接enter，如果不需要直接N 然后enter；
Use ESLint to lint your code?：是否使用ESLint，是一个检查javascript语法错误的工具，这个前期可以直接N掉；
Setup unit tests with Karma + Mocha?：这个前期也可以直接N掉；
Setup e2e tests with Nightwatch?：Nightwatch是一个测试工具，N掉即可，前期用不到；
到现在为止，初始化项目的基本陪就结束了，如下图；
然后根据提示执行，
cd vuecli：进入项目目录；
npm install ：安装项目依赖，这可能会慢些，因为有些是境外资源，有经验的同学可以更换一下安装源，百度即可；
npm run dev : 运行程序，此时你默认的浏览器会打开一个新的页面，表示你安装成功并成功使用vue-cli初始化了一个项目；
项目目录介绍：
我是用的开发工具有两种，windows下使用webstorm，因为PC机配置比较高，跑webstorm完全没有问题；mac下使用vscode，macbook pro是个乞丐版跑vscode会更顺畅些，我还是比较推荐使用vscode，因为比较轻量而且插件也有很多，界面也非常友好；
打开项目，看到如下目录结构；
build—webpack打包配置
config—开发配置
node_modules – 环境依赖
src – 项目文件存放目录，包括入口文件和路由、vue、js、样式文件等（我比较喜欢把样式文件放到src内，也可以放在static文件中）
static—静态文件（一些静态图片等的存储目录）
package.json 项目配置文件
index.html 打包后的html文件
文件目录中主要使用的是 src和static文件夹
以上是基于Vue-cli初始化项目及文件目录的简单介绍，下面基于以上内容写一个小demo，有关于路由基本设置、路由传参等
1﹜ 新建、修改模板
a) 修改默認Hello.vue代碼如下，内容比较简单，不做过多解释，一个输入框、一个提示文字，和一个带有提示的按钮，页面需要引入router配置文件及router文件下的index.js，因为我们使用的是编程式方式，
router.push({ name: 'search',params:{routertext:this.text} })，编程式路由的跳转方法，并向路由命为search的路由传递routertext为data中的text及输入框中输入的值，到这里不要急于观看页面效果，因为功能还没完成，会报错，忍住全部写完后再看效果；
2﹜ 新增搜索结果展示页面search.vue代码如下，次页面功能主要是展示首页要搜索的内容，我们知道这个可以使用组件传参的形式实现，是的没错，但是我们要使用的是路由传参的方式；
this.$route.params.routertext 这句的意思是获得首页向路由传递routertext参数的值
3﹜ 路由配置，代码如下
主要说明下router下的router.js，这是配置路由的页面，如果你不想麻烦可以把代码直接放到router下的index.js文件中，个人习惯分开，path是路由的路径及地址栏上显示的，name是这个路由的名称，component是这个路由用的展示组件位置；
path: "/search/:routertext" ， ：routertext为要传递的参数，对应之前的文件
4﹜ 样式文件代码如下，不做过多解释
完成以上代码后，基本的功能就实现了，npm run dev 看下效果，GIF太特么大了传不上来，注意看地址栏的url，写的不好有问题请大家指正，互相交流，谢谢！
