Vue-cli脚手架的搭建

Vue-cli脚手架的搭建

目录
一. 环境搭建
二. 安装工具
三. 搭建脚手架
四.参考资料

Vue是最近比较流行的构建用户界面的渐进式框架。 想要用vue构建界面，需要先搭建vue-cli脚手架。

一.环境搭建

开发工具：JetBrains WebStorm

二.安装工具

因为要把搭建的脚手架搭建在JetBrains WebStorm的工作空间中，我的工作空间为E:\Users\lenovo\WebstormProjects。所以在调用cmd时，直接在该路径下调用。大家也可以在其他路径调用安装。

1.node 安装

在文件路径处输入cmd，回车出现编译界面。



检验电脑是否有node，执行命令行node -v（node后有空格）

如果电脑没有安装node，指路https://nodejs.org/en/download/选择windows，下载默认下一步安装。然后再用上面的命令行检查是否安装和安装版本。

2.安装npm

其实在安装node的时候就已经把npm安装好了，现在只需要执行命令行 npm -v检查一下安装的版本号。

3.安装webpack

执行命令行npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

4.安装vue-cli

命令行执行 : npm install -g vue-cli // 加-g是安装到全局。
安装完成之后输入vue -V 查看版本号//V大写

输入命令行vue，则可以看到关于vue的相关命令

三．搭建脚手架

1.初始化项目

在命令行输入：vue init 模板名称 项目名称（例如：vue init webpack demo）（须等一段时间）会出现以下界面

*//工程名为demo? 若是回车

//工程描述 回车

//工程开发者 是你？ 回车

以上命令回车处理或者有些不需要的话手动处理

按照上面操作执行命令

2执行命令npm run dev

搭建成功。

四．参考资料

1.廖雪峰官方网站https://www.liaoxuefeng.com/wiki/1022910821149312/1023025597810528
2.https://www.cnblogs.com/loveyaxin/p/7094089.html
3.https://www.imooc.com/article/22830
4.https://blog.csdn.net/gqzydh/article/details/80912889