最近一段时间开始学习前端,选择从Vue框架开始学习,为了加深对Vue框架的理解和使用,在此记录整个学习过程,看到文章的小伙伴如果有任何问题还请评论,看到就会回答哦!!!(注:学习资源来自于慕课网——“Vue实战开发去哪儿网App”课程)
首先配置项目需要的环境
(1)安装Node环境
安装node直接去官网下载即可(Download | Node.js)。这里提供了两个版本LTS和Current,选择下载LTS版本(这个版本虽未包含最新特性,但相对稳定),根据操作系统选择对应版本,下载安装即可。
测试是否安装成功的方法:打开终端命令行,输入node –v,回车,继续输入npm –v,回车,其中npm是node的包管理工具,终端输出版本号即代表环境安装成功,如下图所示:
(2)构建Vue项目
Vue官网(介绍 — Vue.js)提供了一个官方的CLI,即脚手架工具,来帮助构建项目,该项目由webpack构建(webpack是前端最流行的打包编译工具),首先安装Vue CLI。打开终端命令行,输入npm install --global vue-cli,等待安装完成。
接下来选择文件夹构建项目,我选择F盘的travel文件夹(可在任意盘创建travel文件夹),打开终端命令行,输入vue init webpack travel,下面根据项目建立情况填写基本的信息,如图所示:
填完这些基础信息后,Vue CLI会自动下载依赖,直至下图所示表示项目初始化完成:
项目初始化完成后,根据提示进入到travel文件夹,输入 cd travel ,再输入npm run dev,回车,项目进行自动化打包。
之后打开浏览器,在浏览器中输入http://localhost:8080,若显示以下界面:
即代表整体环境已经配置好,然后就可以进行后续的编程了。