VUE超超超！入门介绍

雨点打透心脏的1/2处 2022-12-01 15:41 198阅读 0赞

## 嗯。。。VUE手把手教程来了！ ##

在运行vue项目之前是必须需要安装下面两个，但实际上node.js中有npm,npm是一个包管理工具，可以理解为和Maven差不多 的东西![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center]  
在执行npm命令时，默认使用的是国外的下载源，可以 通过一下代码配置为淘宝的镜像 ：

npm config set registry https://registry.npm.taobao.org

成功之后，接下来安装 Vue的工具：

*  npm install -g vue-cli \# 只需要第一次安装时执行
 *  vue init webpack my-project \# 使用webpack模板创建一个vue项目
 *  cd my-project \#进入到项目目录中
 *  npm install \# 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
 *  npm run dev \# 启动项目

这里我们使用PowerShell来创建一个 vue项目，用cmd也是可以的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 1]

在downloading template一段时间后就会开始一些列的设置，黄色字体为系统对你的询问，后面为我创建这次项目时候做出的选择。在最后一步我选择了No,是因为带你第一次创建vue项目还是一步一步来，熟悉后便可选择上面两项的 任意一项了。这里其实只是选择No后，需要我们进入到项目文件夹中手动执行运行一下npm install，而选择了yes他会自动帮你执行这条命令。项目生成后我们这次使用HBuilder X来打开目录，不要问为什么。。。  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200827233007736.png\#pic\_center][https_img-blog.csdnimg.cn_20200827233007736.png_pic_center]

其中`package.jsonpackage.json` 定义了当前项目的依赖，其中`dependencies` 当项目打包后会跟着项目一起发布。`devDependencies`开发时候的依赖，项目打包后不会跟着项目一起发布。执行`npminstall` 时下载的也就是这里面的依赖，就是node\_modules文件。  
运行项目后我们发现，明明 只有一个index.html页面，为什么却显示了这么多内容呢？这里修改了`index.html`中的title为javaboy，来确定这一点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 3]  
很容易想到 ，这里是因为html页面中body的内容被替代了！我们来看main.js的代码（整个项目入口）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 4]  
这里new了一个vue对象，`el: #'app'`的意思是把前面html页面中id='app’进行 了渲染，然后注册新的组件\{ App \}（导入在页面最上方import。先导入，在注册!)  
最后显示的内容为 `template: '<App/>'`。我们来看看App.vue里面定义的内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 5]  
页面由`<template>，<script>，</style>`三部分组成。是不是发现了`template`呢？  
在div中，展示了一张图片，然后是一个陌生的`<router-view/>`路由。可以把路由简单理解为一个占位符，展示什么内容不确定也不知道，具体所展示的内容由访问 的URL来决定。URL指向了什么资源，这个标签的位置就展示什么！简单的来说就是`不同路径展示 不同的东西`。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 6]  
可以在components中看到一个HelloWorld.vue的文件，定义好之后需要在路由里面去注册 ，注册后才能跳转可以看到index.js中先`import`,然后在`routes[]`中定义了路径、名字、组件名称。路径。然后找组件 。现在我们来自定义一个组件，然后注册后访问他！  
在components文件夹下定义一个.vue文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 7]  
随后在路由表中注册，并且进行配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 9]  
大功告成！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9e6bf09f850c4f86a63c091ea7828a67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/2c9c38d0b10c46ad8e7352fffbf2db0a.png
[https_img-blog.csdnimg.cn_20200827233007736.png_pic_center]: /images/20221123/f77193b5d99f433bb08763569e5b5755.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/4fdb52ae04ac40ed9d9a27bf1771ee3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/f51727f8776347e583dec150d62d28ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/141187c0e9da41aebebc332e7af5e983.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/02035b08dbbe48a28b46d4b1023b4246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/f37454b7a82f47feaf067509ae907c56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/c0e6c8c5ad3a40d0882dbcd577c8c654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/2242fd8f0c98441a959c188e921f6a51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/bc16959153634736a5f676703065502a.png