vue-cli是官方提供的一个脚手架(预先定义好的目录结构以及基础代码,咱们在创建Maven项目可以选择创建一个骨架项目就是脚手架),用于快速生产一个vue的项目模板;
创建vue-cli的一个步骤:
第一步:
使用vue-cli,首先需要环境准备;
需要安装node.js (可以到node.js官网中下载)
安装完成node.js后,打开cmd(建议以管理员的方式打开)
node -v 可以查看node.js安装的版本
在安装完node.js后,默认会安装一个npm;
npm -v 可以查看npm的版本
然后安装node.js淘宝镜像加速器(cnpm)
npm install cnpm -g
npm install --registry=https://registry.npm.taobao.org (推荐安装淘宝镜像加速器)
注:以上可以二选一;
到这里环境准备就已经好了;
现在我们将可以安装vue-cli脚手架了;
安装vue-cli
cnpm install vue-cli -g
(过程下载安装需要等待)
安装完之后,可以进行测试是否安装成功;
vue-list (当显示的结果如图显示则是安装成功)
到这里就已经安装好了vue-cli;
然后可以创建一个vue-cli项目;
有六个模板,可以选择其中一个模板创建项目;
vue init webpack firstvue (这里的webpack是以上模板的其中一种,然后firstvue为项目名称)
然后等待下载模板后,
会询问你:
是否是fristvue这个名称?(回撤就行)
是否加上描述?(回撤就行)
作者?(回撤就行)
vue构建?(选择第一个选项,运行+编译,适合大多数用户)
是否安装vue-router? No (暂时不装)
Use ESLint to lint your code? No
是否要语法检查?No
最后是即将创建完成,是否默认加载一些依赖jar包?
No,I will handle that myself
(选择最后一个,不,自己手动配置)
到这里就创建完了一个vue-cli项目;
cd firstvue(项目名称) 启动
npm install
npm run dev 运行项目
当运行出现http://localhost:8080/时,同时亦可以打开vue的项目时,就可以已经创建完成;