基于Vue-cli的项目开发经验

接触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及输入框中输入的值，到这里不要急于观看页面效果，因为功能还没完成，会报错，忍住全部写完后再看效果；