前言
工欲善其事必先利其器,想把前端的东西学好,首先得有一套趁手的软件工具,因此我们需要准备好前端的工具。
nodejs
javascript 代码的运行原本需要浏览器引擎去解析和执行,而nodejs js引擎单独封装成程序从而使js代码解析和执行过程不依赖于浏览器,因此在一定程度上我们可以将nodejs称为前端的"jdk",在学习前端内容时nodejs已经不可或缺前端工具。
npm
npm 全称为 Node Package Manager 即node 包管理工具,他是管理前端库依赖的利器,其设计思想与maven类似,只不过它管理的一些前端的依赖包,在我们实际开发中需要配置好npm的相关环境。
webpack
webpack也有部分类似maven功能可以帮你处理好各个包/模块之间的依赖关系(modules with dependencies),只不过webpack是以插件方式存在,它将从npm中安装的包打包成更小的浏览器可读的静态资源,提供给浏览器访问使用,在安装好nodejs的以及设定好相关npm配置后,需要安装webpack来帮我们更好工作。
vscode
vscode 是代码编辑利器,在猿世界中它以优美的界面和便捷的操作赢得令人称颂的口碑,此处就不做过多的解释。
vue 脚手架快速创建模板工程
前期环境准备
由于小猿已经安装nodejs并配置了npm环境,此处的内容就不过多赘述,如果有童鞋不晓得nodejs 安装和相关环境配置,那可以参考nodejs安装及npm环境配置。
小猿当前机子已经成功配置
安装webpack
npm install webpack -g
安装vue-cli
npm install vue-cli -g
此处有警告的原因是小猿已经安装过,所以会有重复警告
vue安装成功。
问题:无法查看vue和webpack
配置以上内容就可使用webpack命令和vue命令
创建模板工程
vue init webpack vue-demo
执行后如下所示:
其中会让我们自己选择一些配置,按照自己的意愿配置即可。
至此,vue模板工程搭建完毕。