后端 Java 程序员眼中的 Vue——（一）创建及运行

现在 Vue 用的越来越多，工作上有时前后端都要搞，作为后端程序员接手 Vue 该如何做呢，下面来记录一下基础的东西，并创建一个 Vue 项目

• 谈 Vue 不能避开的 3 个东西

Node.js
npm
vue-cli

Node.js是运行前端 HTML 、CSS、JavaScript 的平台
npm全称 Node.js Package Manager,就是前端 Node.js 包管理工具
vue-cli快速搭建 Vue 项目的骨架、脚手架；
有了创建项目的 vue-cli，创建完项目就在 Node.js 运行，感觉就是后端创建一个 Java Web 项目然后放 Tomcat 上运行一样，下面来看怎么创建第一个项目。

1.搭建环境

由于Node.js包含npm的安装选项,其实真正要安装的只有两个：Node.js 、vue-cli

• 安装 Node.js
  https://nodejs.org/en/
  
  推荐安装红框中的LTS版本，意思是 Long Term Support ——长学期支持版本，而不是当前最新版本。
• 下载的安装包是一个直接能在windows上双击运行.msi文件，然后一通下一步安装即可，安装步骤略。
  安装完打开 cmd 命令行，输入

node -v
npm -v

出现如图版本号，代表 Node.js 安装成功

2.安装 vue-cli

-vue-cli是一个项目构建工具，它也是一个 npm 包，在前面安装完 Node.js 后，需要先设置镜像地址为淘宝地址，这个操作类似 Maven 国外镜像仓库太慢，我们用阿里的镜像地址代替一样

npm config set registry https://registry.npm.taobao.org

再输入

npm install -g @vue/cli

来安装 vue-cli 脚手架，-g意思是全局应用的意思，这样在随便哪个目录下都能能用此脚手架命令，安装过程会稍等一会，结果如图：

3.创建项目

找一个你想创建 Vue 项目的目录，我这里就直接在当前目录下创建了。运行

vue create vuedemo

来创建一个叫 vuedemo 的 Vue 项目，一个 Vue 项目就创建完了，而且还是基于最新的 vue-cli3 来创建的，前面还有一个脚手架版本 vue-cli2，这个不细说，创建项目后如图：

4.运行项目

创建完根据命令行中的提示。先打开 vue 项目目录，

cd vuedemo

然后执行

npm run serve 

如图：

至此一个 Vue 项目创建完成，图上的报错是因为我把命令输错了；最后根据提示访问http://localhost:8081/地址，出现如下页面说明vue项目创建成功了！

5.备注

是不是很简单，其实博主主要想让大家了解大步骤其实并不多，但是小的细节还是比较多的，尤其是第3步运行vue create vuedemo的时候，下面我按顺序来截图并说明在vue create vuedemo时的详细内容，请看一堆图:

• 执行vue create vuedemo
  
  移动>选中Manaully Select Featrues 后按回车
  
• 选完回车
  
• 输入n，代表否，回车
  
• 选择package.json回车
  
• 是否保存为将来的项目的前置设置,或叫前置模板，选否；然后等着，最后的时间比较长，耐心等待；然后就到了第 5 步，运行项目了：npm run serve了

7.结束

这样一个 Vue 项目就创建完成了，你 get 到了吗？有了项目，平时该怎么开发，创建完项目的目录都是干什么用的？下一篇 介绍安装类似 后端eclipse 、IntelliJ IDEA工具的前端开发工具 WebStorm，还有会介绍目录干什么的，敬请期待！
后端 Java 程序员眼中的 Vue——（二）webstorm安装及免费注册