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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013808809/article/details/79110002

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
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页