vue.js的安装--vue-cli脚手架

vue 推荐的开发环境：

node.js: JavaScript运行环境（runtime），不同系统直接运行各种编程语言
npm: node.js下的包管理器。由于国内使用npm会很慢，这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli:
vue的脚手架，用户生成Vue工程模板

一、安装Node.js

从Node.js官网上下载并安装node，安装过程很简单，一路"下一步"即可。

安装完成之后，打开命令行工具，输入node -v，如下图，如果出现相应的版本号，则说明安装成功。



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



OK！node环境已经安装完成，npm包管理器也有了。

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像--cnpm。

二、安装cnpm

在命令行中输入如下代码然后等待

npm install -g cnpm --registry=http://registry.npm.taobao.org
安装完成如下图。



完成之后，我们就可以用cnpm代替npm来安装依赖包了。cnpm的使用方法和npm完全一致，只需要将npm改为cnpm即可。

三、安装vue-cli脚手架构件工具

在命令行中运行命令npm
install -g vue-cli，然后等待安装完成，安装完成后可以通过vue -V （这里的
V 必须大写）来查看vue版本。



注：

如果在执行npm install -g vue-cli时出现npm
warn optional skipping optional dependency: fsevents的问题。

如下图



原因是fsevent是mac osx系统的，如果是在win或者Linux下使用，便会产生警告，忽略即可

四、用vue-cli构件项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在选定的目录下，在命令行中运行命令vue
init webpack myVue。

解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中myVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中，如下图。



运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

打开myVue 文件夹，项目文件如下所示：



这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

五、安装项目所需依赖

要安装依赖包，首先cd到项目文件夹（myVue文件夹），然后运行命令cnpm
install或npm install，等待安装。



安装完成之后，会在我们的项目目录myVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。



安装完依赖包之后，就可以运行整个项目了。

六、运行项目

在项目目录中，运行命令npm
run dev，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。



这里简单介绍下npm run dev命令，其中的dev对应的是package.json文件中，scripts字段中的dev，也就是node
build/dev-server.js命令的一个快捷方式。

 

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。