cnpm及vue-cli的脚手架工具安装,构建项目

1. 安装NPM淘宝镜像cnpm

在上一篇NodeJs安装与全局配置
中已经安装了nodejs。但是因为npm源在国外,国内使用npm会很慢,可以使用淘宝NPM镜像(http://npm.taobao.org/)
打开控制台,输入命令

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

这里写图片描述
输入cnpm -v 提示不是内部或外部命令,说明cnpm没有安装成功,找到user/admin/.npmrc文件删除后,重新执行以上命令,再输入cnpm -v就可以显示版本号了.

2. 安装vue-cli

cnpm安装好之后,就可以用cnpm来安装vue脚手架vue-cli了。

cnpm install -g vue-cli
安装成功后vue -V就可以看到安装的vue版本号了。
这里写图片描述

用vue构建项目

vue init webpack my_project
安装过程中需要多按几次回车键。
cnpm及vue-cli的脚手架工具安装,构建项目_第1张图片
cnpm及vue-cli的脚手架工具安装,构建项目_第2张图片
根据安装后的提示,进入项目目录

`
cd my_project
npm run dev
cnpm及vue-cli的脚手架工具安装,构建项目_第3张图片
这就表示已经启动了项目,如果停止项目,ctrl+c退出即可
打开浏览器输入: localhost:8080
cnpm及vue-cli的脚手架工具安装,构建项目_第4张图片

你可能感兴趣的:(前端)