文档章节

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

阿卡
 阿卡
发布于 2017/05/04 09:20
字数 1528
阅读 44
收藏 0
点赞 0
评论 0

之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月的学习和实战,基本厘清了Vue1 + VueRouter1 + browserify的一些技术点。并且通过几个实际项目的工作,已经验证了自己利用该技术完成项目是没有问题的了。

但是,现在主流的打包方式已经变成了webpack了,而在guthub上面找的很多插件在browserify上打包可能会出现错误,以至于需要自己造轮子。因此,我用了几天时间来捣鼓webpack

更重要的是,vue和VueRouter都已经升级到2.x的版本了。我之前基于1.x版本做的那些方法都发生了改变。

因此,我这次从头来写一个系列的博客,把自己遇到的问题和解决方法都记录下来。以便于自己的温习,也方便新手可以快速的上手。

环境准备

首先,要开始工作之前,还是需要把环境搭建好。我这里的环境是mac,如果你是windows,请自己确保环境没有问题。

mac+nodejs+npm环境是必备的。另外需要文本编辑器,我使用的是atom,当然,你可以使用sublime或者其他的,都没有关系。只是,nodejs是必须要安装的。

各个系统安装不一样,详情参考:nodejs 官方网站

安装好nodejs 之后,在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来,就说明,npm也已经安装好了。

有了Nodejs环境,则我们可以开始了。

为了在学习过程中便于查找资料,一定要准备好翻墙工具。至于怎么翻墙我就不说了,因为免费的都不太好用。收费的vpn之类的一般都可以。不过我建议有条件的自己购买一个国外的vps之类的自己搭一个翻墙环境,然后自己用,无论是稳定性还是各个方面都相当不错。

最后,不要相信百度,坑死你。

vue-cil构建项目

vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。

我们首先,需要安装vue-cil。命令如下:

$ npm install -g vue-cli
  • 1
  • 1

上面代码中的 $ 为终端前缀,不是让你输入的。下面涉及到终端的部分均是如此,不再累述。

这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。

下面,我们来用vue-cil构建一个项目。

首先,我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/Sites/MyWork/这个目录下面,那么我的命令如下:

$ cd ~/Sites/MyWork
  • 1
  • 1

进入到目录之后,我们按照下面的代码逐条输入,新建一个自己的vue项目

$ vue init webpack vuedemo
  • 1
  • 1

输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。

如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:

$ cd vuedemo
$ npm install
  • 1
  • 2
  • 1
  • 2

执行npm install需要一点时间,因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就ctrl+c停止掉,然后再执行一次即可。如果还是照样,建议检查是不是因为没有翻墙的原因,或者,把npm源换成国内的,这里我就不说这么弄了,具体去问google

安装完成后,终端如图:

最后,执行下面一句,把项目跑起来

$ npm run dev
  • 1
  • 1

执行后,终端如图:

如上:四行命令,就可以把一个名为vuedemo的项目跑起来。当然,这个名字你是可以随便起的,根据你的实际项目来定。

好,通过上面的这些命令,我们就实现了新建一个vue+webpack的项目。在运行了npm run dev之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。

好,我们的第一步,已经顺利完成了。

小结

通过上面的几个命令,我们就可以把项目跑起来了。问题是,我们需要掌握一些知识点,我提出来,看官自己找资料学习:

  1. 什么是nodejs? nodejs有哪些用处?
  2. 什么是npm? npm如何安装软件?
  3. 什么是webpack? 它有什么优缺点?
  4. 终端的基本使用。

我是强烈建议学习前端的同学整mac学习,但是如果你实在没有mac也没有关系,可以使用Linux系统来学习。如果你又不用linux,那么没办法了,可以使用windows。但是windows下面的cmd工具实在是太操蛋了。我相信大家在windows上一定安装了一款软件叫Git。OK,只要有这个也行,在任意文件夹右击菜单,在菜单中点击git bash here 菜单,然后可以打开一个类似于终端的面板,这里支持一些linux的常用的命令,包括vim工具都有。虽然界面是丑了点,但是比cmd要好用。

本篇博文只是简单的说了一下如何用vue-cil来构建一个项目,但是这只是一个基础款而已,我们还是要用在我们的项目中,我们下一篇进行学习。

本文由FungLeo原创,允许转载,但转载必须附带首发链接。如果你不带链接,我将采取包括但不限于深深的鄙视你等手段!

首发地址:http://blog.csdn.net/fungleo/article/details/53171052

© 著作权归作者所有

共有 人打赏支持
阿卡
粉丝 7
博文 14
码字总数 8500
作品 0
渝北
程序员
程序猿DD/SpringCloud-Learning

Spring Cloud教程 本项目内容为Spring Cloud教程的程序样例。如您觉得该项目对您有用,欢迎点击右上方的Star按钮,给予支持!! 我的博客:http://blog.didispace.com 我的小密圈(深度交流与...

程序猿DD ⋅ 2016/11/03 ⋅ 0

《从零开始构建自己的Linux》实战视频课程上线了!

  自己做一个或做一次Linux操作系统,是最有效地深入学习Linux操作系统原理方法。使用源代码零开始构建一个Linux,即从宏观上了解构成操作系统各个组件及其之间的关系,又在微观上掌握大量...

dbtrain ⋅ 2017/05/19 ⋅ 0

《从零开始构建自己的Linux》实战视频课程上线了!

  自己做一个或做一次Linux操作系统,是最有效地深入学习Linux操作系统原理方法。使用源代码零开始构建一个Linux,即从宏观上了解构成操作系统各个组件及其之间的关系,又在微观上掌握大量...

dbtrain ⋅ 2017/05/19 ⋅ 0

51CTO《从零开始构建自己的Linux》实战视频课程上线了!

  自己做一个或做一次Linux操作系统,是最有效地深入学习Linux操作系统原理方法。使用源代码零开始构建一个Linux,即从宏观上了解构成操作系统各个组件及其之间的关系,又在微观上掌握大量...

dbtrain ⋅ 2017/05/19 ⋅ 0

利用python进行数据统计实战,生成丰富的图表报告(附源码)

实现功能 1.对禅道上的bug进行定制化统计,生成丰富的图表报告 2.通过jenkins自动构建,每日邮件通知结果 准备工作 配置很简单,一次配置,长期受用。 1.禅道上bug严重程度定义(后台->自定义...

python达人 ⋅ 05/25 ⋅ 0

从零开始学做微信小程序,看这些就够了!

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序...

王练 ⋅ 2016/11/09 ⋅ 22

Spring+Mongodb实战(持续更新中...)

本人文笔很烂请见谅,欢迎吐槽和各种拍砖!分享快乐! 1.准备工作 Spring Data MongoDB spring-data-mongodb是Spring对Monodb进行封装的Spring-Data项目的分支。点击上面的链接获取最新版。 ...

lee5hx ⋅ 2014/03/29 ⋅ 2

Maven的核心笔记(1)配置Maven环境变量

Maven是啥? 1.Maven是一种项目构建管理工具,自动下载架包。 2.目前主流的项目构建工具:Maven、Ant、gradle。 3.两个主要概念:坐标——构件,仓库。 一、maven的环境 1.Maven是基于项目对...

山月风成 ⋅ 2017/10/12 ⋅ 0

20分钟轻松制作移动网站

最近关于移动网站开发或APP轻应用的内容越来越多了,,有一些好的方法可以快速开发,但不系统,这里推荐一本书吧。  PhoneGap的目的是用来快速开发移动跨平台 APP,它基于 HTML 5,支持市面...

woiwoi ⋅ 2016/02/03 ⋅ 0

【决胜AI】人工智能与深度学习实战课程

【决胜AI】人工智能与深度学习实战课程(深度学习 机器学习 人工智能 python 数据分析 数据挖掘 Tensorflow Caffe) 网盘下载:https://pan.baidu.com/s/1i5h8Rop 密码: zv3w 课程背景基于人...

相爱1生 ⋅ 2017/10/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HiSDP —— 高效的C++软件开发平台

目前阿里集团每天有近1000PB的数据是通过LogAgent采集的,为了让LogAgent做到资源占用节省和高效采集,背后是基于HiSDP去构建的。 缘由 当决定采用C++编程语言去开发一个软件时,紧接着所面临...

阿里云云栖社区 ⋅ 21分钟前 ⋅ 0

zookeeper-3.4.12 下载与安装教程

一、zookeeper下载地址 http://mirrors.hust.edu.cn/apache/zookeeper/ 二、启动教程 把压缩包放在指定目录下 第三: 进入 conf文件夹底下 zoo_sample.cfg 文件名改成 zoo.cfg 第四步: 进入b...

泉天下 ⋅ 23分钟前 ⋅ 0

Oracle 中文日期转换

SELECT TO_date('2011年11月11日', 'yy"年"mm"月"dd"日"') FROM DUAL; 1. Oracle无法识别中文格式,所以添加双引号。 2. 后面的格式是指字符串在转换前的格式,而不是指转换后的格式。...

江戸川 ⋅ 24分钟前 ⋅ 0

MySell:API Spring Boot

起步 类目 商品 订单

BeanHo ⋅ 27分钟前 ⋅ 0

Spring方法拦截器MethodInterceptor

参考资料 1、Spring方法拦截器MethodInterceptor 2、Sharding JDBC源码分析-JdbcMethodInvocation类的作用

哎小艾 ⋅ 30分钟前 ⋅ 0

正则表达式

元字符 元字符,又叫字符集,就是用一些特殊符号表示特定种类的字符或位置。 匹配字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 匹配...

wangchen1999 ⋅ 30分钟前 ⋅ 0

数据库数据导入Elasticsearch案例分享

基于bboss持久层和bboss elasticsearch客户端实现数据库数据导入es案例分享(支持各种数据库和各种es版本) 1.案例对应的源码 https://gitee.com/bboss/bboss-elastic/blob/master/bboss-el...

bboss ⋅ 31分钟前 ⋅ 0

动手---sbt(2)

参考 https://blog.csdn.net/leishangwen/article/details/46225587 建立一个chisel_max目录,文件内容如后面所述,现在开始执行命令: joe@joe-Aspire-Z3730:/media/sdb4/download/scala$ c......

whoisliang ⋅ 37分钟前 ⋅ 0

纯js实现最简单的文件上传(后台使用MultipartFile)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr......

孟飞阳 ⋅ 42分钟前 ⋅ 0

iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码、FMDB、键盘动态高度、定位等 动画...

sunnyaigd ⋅ 43分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部