vue-cli搭建项目及遇到的错误与解决方法

vue-cli搭建项目及遇到的错误与解决方法

工欲善其事必先利其器,安装所需环境。

1. node和npm的安装

首先需要安装node环境，直接到官网下载安装包 https://nodejs.org/zh-cn/

安装node默认安装npm， 不需要重复安装npm。安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。



2. 下载dev-tool工具

为了以后调式做准备 https://github.com/vuejs/vue-devtools#vue-devtools

3. 安装全局vue-cli脚手架

npm install -g vue-cli

出现如下问题：





错误主要原因：



没有权限，导致全局安装vue脚手架不能成功

window+x 以管理员身份打开



再次安装 npm install -g vue-cli，如果安装速度比较慢，建议使用淘宝镜像

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

安装成功如下：



检测vue是否安装成功：vue -V



4. 初始化项目

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack project

project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹，配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目，然后进入项目目录（cd project），使用 cnpm /npm安装依赖:

cnpm install

5.启动项目

npm run dev