后端 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/
    后端 Java 程序员眼中的 Vue——(一)创建及运行_第1张图片
    推荐安装红框中的LTS版本,意思是 Long Term Support ——长学期支持版本,而不是当前最新版本。
  • 下载的安装包是一个直接能在windows上双击运行.msi文件,然后一通下一步安装即可,安装步骤略。
    安装完打开 cmd 命令行,输入
node -v
npm -v

出现如图版本号,代表 Node.js 安装成功
后端 Java 程序员眼中的 Vue——(一)创建及运行_第2张图片

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——(一)创建及运行_第3张图片

3.创建项目

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

vue create vuedemo

来创建一个叫 vuedemo 的 Vue 项目,一个 Vue 项目就创建完了,而且还是基于最新的 vue-cli3 来创建的,前面还有一个脚手架版本 vue-cli2,这个不细说,创建项目后如图:
后端 Java 程序员眼中的 Vue——(一)创建及运行_第4张图片

4.运行项目

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

cd vuedemo

然后执行

npm run serve 

如图:
后端 Java 程序员眼中的 Vue——(一)创建及运行_第5张图片
至此一个 Vue 项目创建完成,图上的报错是因为我把命令输错了;最后根据提示访问http://localhost:8081/地址,出现如下页面说明vue项目创建成功了!
后端 Java 程序员眼中的 Vue——(一)创建及运行_第6张图片

5.备注

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

  • 执行vue create vuedemo
    后端 Java 程序员眼中的 Vue——(一)创建及运行_第7张图片
    移动>选中Manaully Select Featrues 后按回车
    后端 Java 程序员眼中的 Vue——(一)创建及运行_第8张图片
  • 选完回车
    后端 Java 程序员眼中的 Vue——(一)创建及运行_第9张图片
  • 输入n,代表否,回车
    后端 Java 程序员眼中的 Vue——(一)创建及运行_第10张图片
  • 选择package.json回车
    后端 Java 程序员眼中的 Vue——(一)创建及运行_第11张图片
  • 是否保存为将来的项目的前置设置,或叫前置模板,选否;然后等着,最后的时间比较长,耐心等待;然后就到了第 5 步,运行项目了:npm run serve

7.结束

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

你可能感兴趣的:(vue学习,vue,nodejs,npm,java)