前言
这篇博客讲的是基于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
:
最后成功即可: