首先,列出来咱们须要的货色:

  1. node.js环境(npm包管理器)
  2. vue-cli 脚手架构建工具
  3. cnpm npm的淘宝镜像

    装置node.js

    从node.js官网下载并装置node,装置过程很简略,一路“下一步”就能够了(傻瓜式装置)。
    装置实现之后,关上命令行工具,输出 node -v,如下图,如果呈现相应的版本号,则阐明装置胜利。

    npm包管理器

    npm包管理器,是集成在node中的,所以,间接输出 npm -v就会如下图所示,显示出npm的版本信息。

    因为有些npm有些资源被屏蔽或者是国外资源的起因,常常会导致用npm装置依赖包的时候失败,所有我还须要npm的国内镜像---cnpm。

    装置cnpm

    在命令行中输出 npm install -g cnpm --registry=http://registry.npm.taobao.org进行装置
    实现之后,就能够用cnpm代替npm来装置依赖包了。

    装置vue-cli脚手架构建工具

    在命令行中运行命令 cnpm install -g vue-cli(留神,这里应用cnpm来代替npm,不然速度超级慢。)
    通过以上步骤,须要筹备的环境和工具都筹备好了,接下来就开始应用vue-cli来构建我的项目。

    用vue-cli构建我的项目

    要创立我的项目,首先咱们要选定目录,而后再命令行中把目录转到选定的目录。在这里,我抉择桌面来寄存新建的我的项目,则咱们须要先把目录cd到桌面,如下图。

    在命令行中运行命令 vue init webpack firstVue,桌面就会生成我的项目目录 。解释一下这个命令,这个命令的意思是初始化一个我的项目,其中webpack是构建工具,也就是整个我的项目是基于webpack的。其中firstVue是整个我的项目文件夹的名称,如下图。

    运行初始化命令的时候回让用户输出几个根本的选项,如项目名称,形容,作者等信息,如果不想填间接回车默认就好。


    这就是整个我的项目的目录构造,其中,咱们次要在src目录中做批改。这个我的项目当初还只是一个构造框架,整个我的项目须要的依赖资源都还没有装置,如下图。

    装置我的项目所需的依赖

    在我的项目目录下运行命令 cnpm install来进行依赖装置
    装置实现之后,会在的我的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我的项目须要的依赖包资源。

    运行我的项目

    在我的项目目录运行命令 npm run dev

    npm run dev 命令中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。
    运行胜利