vue学习(一)
来源:互联网 发布:iphone6s壁纸软件推荐 编辑:程序博客网 时间:2024/06/04 19:41
之前写的博客没有采用打包工具,而是直接引用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
。命令如下:
- 1
- 1
上面代码中的 $ 为终端前缀,不是让你输入的。下面涉及到终端的部分均是如此,不再累述。
这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。
下面,我们来用vue-cil构建一个项目。
首先,我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/Sites/MyWork/
这个目录下面,那么我的命令如下:
- 1
- 1
进入到目录之后,我们按照下面的代码逐条输入,新建一个自己的vue
项目
- 1
- 1
输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。
如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:
- 1
- 2
- 1
- 2
执行npm install
需要一点时间,因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就ctrl+c
停止掉,然后再执行一次即可。如果还是照样,建议检查是不是因为没有翻墙的原因,或者,把npm源换成国内的,这里我就不说这么弄了,具体去问google
。
安装完成后,终端如图:
最后,执行下面一句,把项目跑起来
- 1
- 1
执行后,终端如图:
如上:四行命令,就可以把一个名为vuedemo
的项目跑起来。当然,这个名字你是可以随便起的,根据你的实际项目来定。
好,通过上面的这些命令,我们就实现了新建一个vue+webpack
的项目。在运行了npm run dev
之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。
好,我们的第一步,已经顺利完成了。
小结
通过上面的几个命令,我们就可以把项目跑起来了。问题是,我们需要掌握一些知识点,我提出来,看官自己找资料学习:
- 什么是nodejs? nodejs有哪些用处?
- 什么是npm? npm如何安装软件?
- 什么是webpack? 它有什么优缺点?
- 终端的基本使用。
我是强烈建议学习前端的同学整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
- 顶
- 踩
- 上一篇【转载】世界上最牛的编辑器: Vim 3 (原创动图演示所有例子!)
- 下一篇Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
参考知识库
.NET知识库
Linux知识库
Git知识库
- 猜你在找
- Vue学习(一)
- vue学习(一)
- Vue学习(一)
- Vue学习笔记(一)
- vue.js学习(一)
- Vue入门学习(一)
- Vue 学习笔记(一)
- vue学习笔记(一)
- vue学习笔记(一)
- (一)VUE学习地址
- vue学习笔记(一)
- Vue入门学习(一)
- Vue学习总结(一)
- vue-router学习(一)
- vue学习之路(一)--vue-cli安装+vue-router+vue-resource
- vue学习(一) vue指令和过滤器
- vue学习之路 一 (初期搭建vue项目)
- Vue 2.0 vue-router基础学习(一)
- websoket使用Protocol Buffers3.0传输
- windows系统与macos系统的线程处理差别
- jQuery练习代码暂存
- Gerrit的常见ssh命令
- 第一讲 使用JNI输出“Hello World!”
- vue学习(一)
- JS断点调试心得
- 树形联动的问题,大神们帮帮忙吧。
- 数组,ArrayList和list的区别
- 「五一节后跑会指南」2017年五月15场高端会议合集(上)
- Find Small A [HDU-5980] (水)
- Linux 系统常用命令
- Android高效内存:让图片占用尽可能少的内存
- 利用vue-cli创建Vue项目