Mac搭建Vue开发环境,初始化项目详解

时间:2024-03-27 12:58:20

一、引言

小编说了学习什么从不后悔,那么今天继续来说使用Vue之前需要做些什么准备工作。

说句题外话,今天终于出太阳啦,哈哈哈好开森。

二、Node安装

首先,我们需要安装一个Node环境,就好比如你开发Java要安装一个JDK环境一个道理。项目的初始化、打包等都需要用的Node环境,Mac、Windows都有。下载地址

安装步骤就不详细说啦,和平时安装软件一样的,安装完成验证在命令窗口输入 "node -v" 能出来版本就ok啦。

Mac搭建Vue开发环境,初始化项目详解 Mac搭建Vue开发环境,初始化项目详解

三、安装vue-cli脚手架工具

安装完成Node之后呢,我们需要来安装vue-cli脚手架工具。

什么是vue-cli脚手架工具呢?

说白了就是能帮助我们干一些事情,能帮助我们写好Vue.js基础代码的工具等一些事情。

Mac搭建Vue开发环境,初始化项目详解

安装步骤

步骤一:输入命令 "sudo npm install -g vue-cli",-g 这个选项代表着全局安装。

图一 : 正在安装 。 图二:验证是否安装成功,输入"vue list" 能加载出对应模板列表,则表示成功。

Mac搭建Vue开发环境,初始化项目详解Mac搭建Vue开发环境,初始化项目详解

四、初始化项目

第一步:首先来到我们需要创建项目的文件夹目录下,用cd 命令即可。

Mac搭建Vue开发环境,初始化项目详解

第二步:输入命令 "vue init webpack 项目名",这里webpack是一个已经定义好了的模板,也可以自定义。

这里在初始化项目的时候,有几个选项,这里也跟大家说一下。

图一: 正在初始化 , 图二,完成后的样子。

project name // 顾名思义,就是项目的名字

project description //项目的描述

author // 作者

Vue build //打包方式,默认回车即可

install vue-router // 是否安装router,router是路由功能,选择 y

Use ESLint to lint your code // 代码风格检查器,选择y

Set up unit tests // 单元测试,这个就不需要了,选择n

Setup e2e tests with Nightwatch // e2e测试,选择n

Mac搭建Vue开发环境,初始化项目详解 Mac搭建Vue开发环境,初始化项目详解

步骤三 :我们可以看上面最后一张图,也有相对应的提示"To get started:",首先cd进入项目的路径里面,在使用“npm run dev” 来启动项目。我们进入项目路径之后,可以看到vue-cli脚手架工具已经帮我们构建了一个项目的结构,可以直接进行启动。

图二是我们启动后的样子,最后也有相对应的访问路径,默认是8080端口。

Mac搭建Vue开发环境,初始化项目详解Mac搭建Vue开发环境,初始化项目详解

步骤四:项目启动成功。

Mac搭建Vue开发环境,初始化项目详解