vue的安装和创建项目

vue的安装和创建项目

在开始创建项目之前首先要确定你的node npm 已经安装好了

我们可以在命令行中 输入 【node –version 】 查看node版本 【npm –version】查到npm版本

如果都能输出他们的版本号 及说明 node 和npm 安装成功。

如果没有安装nodejs，可参考node.js官网，至于npm包管理器，是集成在node中的。

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

安装cnpm命令

npm install -g cnpm –registry=http://registry.npm.taobao.org

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网

vue项目" title="创建vue项目">创建vue项目命令

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

cnpm install –global vue-cli

首先我们选定要创建项目的目录，然后再命令行中把目录转到选定的目录

vue init webpack my-vue

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

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

生成的目录

打开my-vue，整个项目的目录文件如下如所示：

说明：项目是需要安装依赖包的

首先cd到项目文件夹（my-vue文件夹），然后运行命令 cnpm install ，等待安装

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

因为新建项目之后自动生成了依赖包资源，这里不做具体说明。

启动vue命令

进入到新建的项目下

cd my-vue

启动该项目

cnpm run dev

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