Vuejs教程目录:

  1. 从Demo到实例快速上手Vue.js
  2. Vuejs网络请求组件的使用及解决跨域问题
  3. vuejs单文件应用入门
  4. Vue.js单文件项目中使用Vuex:装载工具
  5. Vue.js单文件项目中使用Vuex:数据操作

之前说了vuejs多文件工程的上手
今天咱们来点不一样的——给予Vuejs的单文件系统的上手


现在单文件项目异常流行,当然你表示不能接受这个理由我也表示接受,但是可以说基于单文件系统我们可以对真个HTML文档用有更大限度的操作,包括数据的渲染。
那么废话不多说,毕竟别的网站说的比我溜,下面我会用比较简单的步骤来带你搭建一个可以跑得起来的项目。

1. vue-cli脚手架
这是官方用于快速的建立vuejs单文件项目的灰常好用的工具,只需要几行命令就可以快速建立一个vuejs的单文件系统项目。恩……好像也没什么特别的……反正就是这个功能。
我们来安装一下,首先确认一下你npm的源是不是在国内。
然后
cnpm install -G vue-cli
把vue-cli安装到全局。

2. 创建vuejs单文件项目
创建项目非常简单,但是又有点麻烦,我们来看看在创建的过程中有什么选项
开始创建
vue init webpack demo
里面的webapck参数的意思是项目给予webpack工具进行打包编译
随后会提示你输入

Project name (demo)

也就是项目的名称,默认是你之前敲入的demo这个名字
我们就不麻烦了,直接回车使用默认,如果你高兴的话,也可以改个名字,但是项目的目录依然会是demo
然后

Project description (A Vue.js project)

这里的是填写项目的说明,按照尿性后面括号就是默认值,我们这里也不麻烦了直接回车使用默认

Author (xxxxxxxx)

这是项目作者,按照尿性,后面会显示默认值,这个默认值是……我也不知道是啥……可能是git的账号,管他呢,依旧回车默认。
之后提示你Runtime + Compiler,这步我看不懂,不过似乎没得选,回车跳过。

Install vue-router? (Y/n)

vue-router是Vuejs的路由组件,如果你不想使用官方的路由组件,还可以参考官方文档使用第三方路由组件,不过我们这里暂时都采用默认官方的,所以敲入Y然后回车。

Use ESLint to lint your code? (Y/n)

这个ESLint是一个JS的代码检查工具,使用后会对你的代码进行各种条条框框的限制,包括但不限于比如代码缩进、运算符号前后的空格、行末的分号等等各种限制,是个优(shen)秀(fan)的代码检查工具,实际上如果没有它也并不影响你写出优秀的代码,所以这里我选择no!

Setup unit tests (Y/n)

是否安装单元测试工具,如果你喜欢你可以选择Y,这里就先跳过,为了更快速的安装。

Setup e2e tests with Nightwatch (Y/n)

安装e2e自动化测试工具,这个可以有,所以我选了Y,然后回车。
到这里我们就初始化好了一个vuejs的单文件项目

3. 安装依赖
按照惯例,我们在一个项目初始化好后,需要安装一下项目的依赖包。
老规矩cd到项目目录下
cnpm install
然后经过很(man)短(chang)的时光后,整个项目就已经安装好了依赖。

4. 启动项目
这个时候,我们可以通过命令来启动这个项目
npm run dev
以及另一个必须要用的命令是
npm run build
这个命令是进行编译打包的命令,运行完这个命令后会在你项目目录里面增加了一个dist目录。里面会存在一个index.html和statics目录,这里面是各种js、css、image资源。部署的时候,把nginx的目录指向到这个目录下就可以访问了。并且,vuejs提醒你,如果你选择直接双击打开这个index.html的话,你是啥都看不到的,因为仅支持通过http协议访问而不是file协议。


到这里,你已经成功跑起来一个vuejs的单文件项目了吧。其他的我们下次再说,或者你可以在下面催我更新。