现在 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/

    • java项目怎么运行vue java生成vue代码_java项目怎么运行vue

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

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

java项目怎么运行vue java生成vue代码_npm_02

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意思是全局应用的意思，这样在随便哪个目录下都能能用此脚手架命令，安装过程会稍等一会，结果如图：

java项目怎么运行vue java生成vue代码_java项目怎么运行vue_03

3.创建项目

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

vue create vuedemo

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

java项目怎么运行vue java生成vue代码_java_04

4.运行项目

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

cd vuedemo

然后执行

npm run serve

如图：

java项目怎么运行vue java生成vue代码_npm_05


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

java项目怎么运行vue java生成vue代码_java_06

5.备注

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

  • 执行vue create vuedemo

    • java项目怎么运行vue java生成vue代码_java项目怎么运行vue_07

  • 移动>选中Manaully Select Featrues 后按回车

    • java项目怎么运行vue java生成vue代码_npm_08


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

7.结束

这样一个 Vue 项目就创建完成了，你 get 到了吗？有了项目，平时该怎么开发，创建完项目的目录都是干什么用的？下一篇 介绍安装类似 后端eclipse 、IntelliJ IDEA工具的前端开发工具 WebStorm，还有会介绍目录干什么的，敬请期待！