Vue 项目实战系列 (一)
2017-05-02 11:36
281 查看
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流。
我在git上找到了一个淘票票的Vue项目,项目地址:
https://github.com/canfoo/vue2.0-taopiaopiao,大家喜欢的话可以给作者点个fork。
看了下项目的代码,然后决定自己在山寨一下这个项目,从零开始自己搭建下。
第一步就是开始进行项目的初始化了,这里使用了Vue的脚手架,Vue-cli进行项目的基础代码结构搭建。由于使用了vue-cli,需要先全局安装下vue-cli.
安装完成后就可以进行项目搭建了,找到一个目录进行项目初始化。
执行:
上面的vue-router 是vue页面的路由管理。ESLink 是对代码规范性检查,不符合规范就会报错,我不太习惯使用,这里选择no,剩下两个是单元测试和自动化测试的,我不太了解,暂时也不需要使用,完成后我们便有了项目的基本目录了。
进入目录看下项目的结构。
build 和 config目录下都是项目的基本配置信息,我们的源码基本都在src下面,这是我们进入mytpp下面,尝试运行下代码,执行cnpm isntall (npm install 也可以,如果使用npm install 出一些错误,可以尝试下安装淘宝镜像,cnpm , cnpm 和npm 基本的使用都是相同的)。完成后执行
稍等片刻就会在浏览器打开一个页面,
这里说明我们的项目初始化完成了。
本小结结束,下一节我们将继续进行我们的项目,进行具体代码的编写。
注:本文出自博客园 https://home.cnblogs.com/u/mdengcc/ ,转载请注明出处。
我在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/ ,转载请注明出处。
相关文章推荐
- Vue 项目实战系列 (二)
- Vue 项目实战系列 (三)
- SharePoint 2007 到 SharePoint 2010 迁移项目实战心得系列(二):升级方法/步骤
- SharePoint 2007 到 SharePoint 2010 迁移项目实战心得系列(二):升级方法/步骤
- Android项目实战--手机卫士开发系列教程
- 北风课堂分享java项目实战系列视频教程
- 分享java项目开发实战系列免费课程
- Redhat Enterprise Linux 5 实战系列(四)RHEL5中部署web项目
- Hadoop大数据零基础高端实战培训系列配文本挖掘项目
- Android项目实战--手机卫士开发系列教程
- Java系列--第七篇 基于Maven的Android开发实战项目
- Hadoop大数据零基础高端实战培训系列配文本挖掘项目
- SharePoint 2007 到 SharePoint 2010 迁移项目实战心得系列(三)
- 实战某小型企业项目系列二:方案设计
- 实战某小型企业项目系列一:需求描述
- Cloudera Hadoop 4系列实战课程(电商业日志流量分析项目)
- SharePoint 2007 到 SharePoint 2010 迁移项目实战心得系列(一):项目背景
- Ruby On Rails系列从入门到精通实战教程(Ruby基础+Rails框架+网上商城项目实战)
- (转)菜鸟级三层框架(EF+MVC)项目实战之 系列二 对数据访问层的抽象上
- 推荐!Android项目实战系列视频教程