一、引言
小编说了学习什么从不后悔,那么今天继续来说使用Vue之前需要做些什么准备工作。
说句题外话,今天终于出太阳啦,哈哈哈好开森。
二、Node安装
首先,我们需要安装一个Node环境,就好比如你开发Java要安装一个JDK环境一个道理。项目的初始化、打包等都需要用的Node环境,Mac、Windows都有。下载地址
安装步骤就不详细说啦,和平时安装软件一样的,安装完成验证在命令窗口输入 "node -v" 能出来版本就ok啦。
三、安装vue-cli脚手架工具
安装完成Node之后呢,我们需要来安装vue-cli脚手架工具。
什么是vue-cli脚手架工具呢?
说白了就是能帮助我们干一些事情,能帮助我们写好Vue.js基础代码的工具等一些事情。
安装步骤
步骤一:输入命令 "sudo npm install -g vue-cli",-g 这个选项代表着全局安装。
图一 : 正在安装 。 图二:验证是否安装成功,输入"vue list" 能加载出对应模板列表,则表示成功。
四、初始化项目
第一步:首先来到我们需要创建项目的文件夹目录下,用cd 命令即可。
第二步:输入命令 "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
步骤三 :我们可以看上面最后一张图,也有相对应的提示"To get started:",首先cd进入项目的路径里面,在使用“npm run dev” 来启动项目。我们进入项目路径之后,可以看到vue-cli脚手架工具已经帮我们构建了一个项目的结构,可以直接进行启动。
图二是我们启动后的样子,最后也有相对应的访问路径,默认是8080端口。
步骤四:项目启动成功。