介绍
Vue CLI
是一个基于 Vue.js 进行快速开发的完整系统
。使用vue脚手架后我们开发的页面将是一个完成的系统(项目)。脚手架将vue的每个组件都做成了单独的文件,为你提前准备好了一个半成品的项目,使你可以基于这个半成品的项目进行快速开发。
一、node.js安装
1.如果需要安装vue-cli脚手架,必须先安装好node.js的环境
官方地址:https://nodejs.org/zh-cn/download/
2. 下载完成后直接点击安装即可傻瓜式安装。
3.勾选同意点击next即可。
4.这儿切记,需要勾选 add to path 如果没有勾选,则需手动配置环境变量。
5.直接下一步。
6.在下一步。
7.耐心等待进度完成。
8.点击finish即可完成安装。
二、环境准备
1. 在黑窗口cmd 输入 node -v ,npm -v 验证安装是否成功
2.在配置npm 的淘宝镜像 npm config set registry https://registry.npm.taobao.org/
3.出来下面内容说明验证成功了。
4.新建文件夹node_space 在该文件夹下新建两个文件夹 npm_cache npm_global
5.配置npm下载依赖的位置
- npm config set cache “E:\the3phases\node_space\npm_cache”
- npm config set prefix “E:\the3phases\node_space\npm_global”
6.npm config ls 验证下是否成功。
三、安装脚手架
1.上面都没问题的话直接来 安装脚手架
- 安装脚手架:npm install -g vue-cli
- 卸载脚手架:npm uninstall -g vue-cli

安装脚手架
2.安装完成后查看脚手架版本,出现下面版本代表安装成功 指令:vue -V
注意:vue —V 出现不是内部或外部指令
解决方案:找到vue.cmd文件所在的目录 将该目录添加到系统环境变量的path中
path=”xxx;D:\node_space\npm_global;”
重启cmd 再次执行vue -V 出现版本号代表安装成功
四、创建脚手架项目
1.首先来看下如何创建一个脚手架|上面的配置完成后, 输入指令:mkdir vue-project 创建一个项目文件夹。
2.创建好项目文件夹后在输入 cd vue-project 跳到当前项目文件路径上输入指令: vue init webpack 项目名 创建项目(项目名看需求)
- 相关解释
3.在输入 cd hello_vue 跳到当前项目路径, 然后在输入指令:npm install (切换到项目的根目录下,每次创建项目都需要执行该步骤)
4.耐心等待完成上面完成,在输入指令启动项目即可 指令:npm run dev | npm start
5.访问路径:http://localhost:8081 出现下面页面说明创建成功了。