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项目命令

安装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命令的一个快捷方式
这里写图片描述

猜你喜欢

转载自blog.csdn.net/NOPR_W/article/details/81065864