• 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/ ,转载请注明出处。

  • 相关阅读:
    转:VS2017常用快快捷键
    转:SQL Server中常用的快捷键
    转:SQL server中转换大小写快捷键
    转:left join 和 left outer join 的区别
    如何修改SVN的地址
    转 Echars地图详解
    HTML5 -- 使用css3实现简单的响应式布局
    Mac上用终端管理MySQL
    DDL 语句
    python 快速写作技巧,格式
  • 原文地址:https://www.cnblogs.com/mdengcc/p/6795304.html
Copyright © 2020-2023  润新知