Vue 项目实战系列 （一）

　　最近一直在学习Vue，基本的文档看完后就需要进行具体的项目进行练手了，本系列文章主要是将我学习过程记录下来，和大家一起学习交流。

　　我在git上找到了一个淘票票的Vue项目，项目地址：

　　https://github.com/canfoo/vue2.0-taopiaopiao，大家喜欢的话可以给作者点个fork。　　

　　看了下项目的代码，然后决定自己在山寨一下这个项目，从零开始自己搭建下。

　　第一步就是开始进行项目的初始化了，这里使用了Vue的脚手架，Vue-cli进行项目的基础代码结构搭建。由于使用了vue-cli,需要先全局安装下vue-cli.

　　

npm install -g vue-cli

安装完成后就可以进行项目搭建了，找到一个目录进行项目初始化。

执行：

vue init webpack mytpp

 

 上面的vue-router 是vue页面的路由管理。ESLink 是对代码规范性检查，不符合规范就会报错，我不太习惯使用，这里选择no，剩下两个是单元测试和自动化测试的，我不太了解，暂时也不需要使用，完成后我们便有了项目的基本目录了。

进入目录看下项目的结构。

build 和 config目录下都是项目的基本配置信息，我们的源码基本都在src下面，这是我们进入mytpp下面，尝试运行下代码，执行cnpm isntall (npm install 也可以，如果使用npm install 出一些错误，可以尝试下安装淘宝镜像，cnpm ， cnpm 和npm 基本的使用都是相同的)。完成后执行

npm run dev 

稍等片刻就会在浏览器打开一个页面，

这里说明我们的项目初始化完成了。

本小结结束，下一节我们将继续进行我们的项目，进行具体代码的编写。

 

 

 

 

 

注：本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ，转载请注明出处。