Vue-cli 快速搭建webpack项目教程

Vue-cli 快速搭建Webpack项目教程

vue-cli是vue官方提供的用于快速搭建单页面应用（SPA）开发的脚手架。首先vue-cli是通过npm安装的。话不多说，直接上步骤

1.安装vue-cli

首先打开cmd 命令提示符，通过npm安装vue-cli，具体命令如下：

npm install -g vue-cli

2.输入vue指令查看是否安装成功

文件下载成功

输入vue list指令

输入vue list 指令后会出现一个列表，这个列表是要选择用哪种方式打包编译文件，我们选择webpack

3. 初始化vue

输入命令，初始化vue，这里的 “example” 是我们定义的文件名。根据不同的项目，可以设置不同名称

vue init webpack example

我们经过一系列设置之后，npm 就会自动创建名为 “example” 的项目了

注意：这里我们发现创建的example文件在 windows/system32目录下，我们要更改一下项目的位置以便于我们管理。

4.进入到项目目录

命令代码：

cd c:/IdeaProjects/example

这里example 文件我放在了 IdeaProjects 文件夹下，大家也可以选择合适的文件夹

5.通过npm 安装项目环境

命令代码:

npm install

这里显示已经安装成功了，这是我们可以运行这个项目文件了

5.运行项目

命令代码：

npm run dev

出现这个画面后，我们的项目已经运行成功了！这时，我们打开浏览器，输入:

https://localhost:8080

就可以看到初始化项目界面了！