Vue的安装入门

Vue的安装入门

前言

刚去公司实习，尽管我的岗位是java后端开发，可是不可避免的还是要接触到一些前端知识。其中，前端最重要的模块之一当属Vue，于是我在闲暇之余也开始了对于Vue的学习。这篇文章先简单阐释一下Vue的安装配置过程。

Vue api风格

选项式api

组合式api

开发前准备

安装Vue工具

Vue.js的标准开发工具——Vue CLI，Vue CLI是一个基于Vue.js的快速开发完整系统。

npm install -g @vue/cli

如果觉得慢可以切换淘宝最新源

 npm config set registry https://registry.npmmirror.com

！！！使用npm install之前用管理员身份打开cmd。

(请提前安装好npm的相关工具，然后再系统——高级系统设置里面配置相应的环境变量)

安装之后可以根据如下命令去访问vue命令。如下：

vue --version

创建首个项目。

vue create vue-demo1

有提示：

可以上下选择，顾名思义，第三个是自定义去选择模版。

空格进行选择，选择最后按enter

选择默认文件存放，即直接选择第一个选项后enter

一系列操作后，在项目生成的目录下输入cmd

运行如下命令：

npm run serve

然鹅在我工作的公司项目运行的是

npm run dev

然后我在网上查看了相关博客，该博客对两个命令的作用解释的很详细，感兴趣的可以参考：

深入解析 Vue.js 项目的启动奥秘：npm run dev 与 npm run serve_vue启动脚本-CSDN博客

运行成功后再浏览器地址栏输入地址：

http://localhost:8080/

我们能看到如下的界面：