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