vue-cli搭建SPA项目

前言

这篇博客讲的是基于vue-cli搭建SPA项目，需要提前建设node.js环境。

vue-cli简介

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

什么是脚手架？

脚手架本质上就是一套工具，由于在web2.0时代，应用变复杂后，出现了很多可以让前端开发效率提升的框架和标准及工具等等，可能这些新的代码方式远行环境还不支持，也许我们需要一个本地测试环境和运行环境及调试环境等，所以需要一套完整的工具帮我们处理问题及项目构建。

一般不同的技术栈也会有自己的目录结构，工作流程，如vue，angular等都会有自己的脚手架，通常叫xxx-cli。

安装vue-cli

打开cmd窗口，执行npm install -g vue-cli

如图：

而后执行vue -V出现版本号即为成功

之后node_global中会出现以下文件：

接着我们在soft下新建一个存放项目的目录：

然后在cmd窗口转到此目录下并执行vue init webpack 项目名（注意项目名不能有大写字母与中文）然后会开始一问一答模式，最后会开始建设项目：

出现以下即为成功：

然后我们需要进入到这个项目当中，执行npm install：

安装所有项目需要的npm模块，此步骤可理解成：maven的web项目创建成功后，修改pom文件添加依赖

然后我们启动这个项目：

最后会出现一个项目链接，我们浏览器进入到这个链接，这就是我们搭建的项目：

这边我们默认的调试端口是8080，但是我们在开发项目之中，可能存在几个项目并行启动，我们就最好是更改此端口。

我们找到项目目录，找到其中的config==>index.js：

使用editplus打开，将其端口更改：

然后回到cmd窗口，按ctrl+c终止项目重新启动项目：

会看到最后想显示的端口号已经改变：

最后使用该端口成功进入项目：

停止项目添加element-ui模块
首先我们终止项目，且路径转到项目下执行npm install element-ui -S：

最后成功即可：