前端学习笔记(九)前端框架之vue工程搭建

前言

工欲善其事必先利其器，想把前端的东西学好，首先得有一套趁手的软件工具，因此我们需要准备好前端的工具。

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模板工程搭建完毕。