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

雨点打透心脏的1/2处 2022-10-08 02:25 211阅读 0赞

## 前言 ##

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

### 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环境配置。][nodejs_npm]  
小猿当前机子已经成功配置  
![在这里插入图片描述][2021061918114387.png]

### 安装webpack ###

npm install webpack -g

![在这里插入图片描述][20210619181702755.png]

### 安装vue-cli ###

npm install vue-cli -g

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70]

此处有警告的原因是小猿已经安装过，所以会有重复警告  
![在这里插入图片描述][20210619182601513.png]  
vue安装成功。

### 问题：无法查看vue和webpack ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 2]  
配置以上内容就可使用webpack命令和vue命令  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 3]

### 创建模板工程 ###

vue init webpack vue-demo

执行后如下所示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 4]  
其中会让我们自己选择一些配置，按照自己的意愿配置即可。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 5]  
至此，vue模板工程搭建完毕。

[nodejs_npm]: https://www.runoob.com/nodejs/nodejs-install-setup.html
[2021061918114387.png]: /images/20221005/f1f6a75c6e5e4a41837aec51986a7874.png
[20210619181702755.png]: /images/20221005/7f7ec1e5259b415aa398bb3d671196dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70]: /images/20221005/8ccd60ae66d64187aad6d604202b553c.png
[20210619182601513.png]: /images/20221005/1b8ac5b1bf4249b5a839bf29033cc4f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 1]: /images/20221005/337e253315704c9da93b0f138cb6dc2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 2]: /images/20221005/b9160cf5d2664c919fbdccd2e2579c74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 3]: /images/20221005/13c9a924b86a49f0beb3852ebe44044c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 4]: /images/20221005/64877ee3fe0d487f96ceedc628841cc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 5]: /images/20221005/dbb3b5024d834605904652f028c0489d.png