vue-cli

ゞ浴缸里的玫瑰 2024-03-22 11:16 55阅读 0赞

#### 文章目录 ####

*  前言
 *  一.什么是vue-cli?
 *  二.vue-cli搭建项目步骤
 *  三.如何创建组件？
 *  四.组件路由
 *   *  1.作用
     *  2.创建组件路由步骤
 *  五.ElementUI

## 前言 ##

在传统的web项目中，一个页面就是一个html文件，各个页面之间是相互独立的，如果存在一种操作是每个页面都有可能存在的，比如判断用户是否登录，这样在每个独立的页面中，都需要编写判断的代码，但是传统的web项目没有一种全局配置方式，会使代码量很大，也很不方便，所以目前已经被淘汰。  
为解决上面的问题，前端推出了一种新的架构思想（**单页面架构+组件**）。这种思想就是说，一个项目中只有一个html文件，也只创建一个vue对象，可以在html中切换不同的组件，有点类似于java中的方法，需要使用的时候，只调用即可，这样就可以很方便的进行全局配置。

## 一.什么是vue-cli? ##

vue-cli是官方提供的一个脚手架，用于快速生成一个vue模板，有预先定义好的目录结构以及基础代码。

## 二.vue-cli搭建项目步骤 ##

1.配置**Node.js**（运行环境）  
①**第一步**：下载并安装  
[下载请点击：http://nodejs.cn/download][http_nodejs.cn_download]  
选择长期支持版本进行下载并安装，注意安装时只需选择下载位置，其余都点击next，直到安装结束。

②**第二步**：检查环境变量是否添加  
![在这里插入图片描述][0b672f55f2014102a94002c094a42480.png]

③**第三步**：打开cmd进行测试  
![在这里插入图片描述][1d1c09f1e3c2411c8f3cbcd8abe596a6.png]  
结果如图，则说明安装成功。  
附加：npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。

2.使用HbuilderX搭建一个vue-cli项目  
![在这里插入图片描述][335c23826b8949518090cbe6f3ae4b30.png]  
创建之后的项目结构：  
![9234464cec144b58ab5df2486465b12f.png][]  
创建完成后，可以点击页面最底部的终端图标，也可以右击项目名称，选择外部命令→npm run serve来运行。启动成功后会出现访问页面的网页地址，进行访问即可。在命令行中使用Ctrl+c,再输入y，按回车键停止运行。

## 三.如何创建组件？ ##

右击src，新建一个vue文件，格式如下：  
![在这里插入图片描述][c27546efdbb44c4bb8f1a5a29bcc78f2.png]

## 四.组件路由 ##

### 1.作用 ###

通过以上步骤，我们为vue-cli项目搭建了环境，并且创建了vue-cli项目，也创建了自己的组件，那么我们如何在html中访问这些组件呢？在前端中，组件是不能直接通过文件名来访问的，我们需要借助vue中的组件路由功能。

### 2.创建组件路由步骤 ###

安装下载vue router组件（Vue.js 官方的路由管理器），让vue把所有的组件管理起来，并为每个组件配置一个映射地址，用来访问。  
**步骤一**：安装vue-router插件包  
使用命令行工具，输入npm i vue-router@3.5.3进行安装。  
**步骤二**：创建router目录，在该目录下，创建一个index.js文件，在其中配置路由。  
![在这里插入图片描述][244dfba67f01401fbe5e22fe9ed2c322.png]  
**步骤三**：配置组件路由  
![在这里插入图片描述][92be7a1215164dd494565ce613206298.png]  
图片中提示的是在配置组件路由时，需要编写的，其余地方不用变。

**步骤四**：在main.js中配置路由  
![在这里插入图片描述][16d2f8c7042740519886815a0a0c7f70.png]  
将以上图片内容添加到main.js文件中。  
**步骤五**：使用路由组件  
在App.vue文件中使用，如图：  
![在这里插入图片描述][8a25eeff97e240ccb637abe56990c8b7.png]

## 五.ElementUI ##

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。在使用时，同样需要安装配置。  
**步骤一**：安装  
在命令行工具输入npm i element-ui -S  
**步骤二**：在main.js中写下一下内容：  
![在这里插入图片描述][a9a2e185dc594f08adf70cdfde6aa39c.png]  
安装成功后，ElementUI中组件可以在官网中根据需求来使用。

[http_nodejs.cn_download]: http://nodejs.cn/download
[0b672f55f2014102a94002c094a42480.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a5221f5ec0bf41b6b95650206864cba0.png
[1d1c09f1e3c2411c8f3cbcd8abe596a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e8cd44dba6e941d1a54915476bdc1898.png
[335c23826b8949518090cbe6f3ae4b30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e38be39488d94c20b5f150b613b01b54.png
[9234464cec144b58ab5df2486465b12f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/99d17d57824c451f8bd8d3c22f26ebd4.png
[c27546efdbb44c4bb8f1a5a29bcc78f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/cde2b4c5f0b34f12a4efb7be784a91b8.png
[244dfba67f01401fbe5e22fe9ed2c322.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/17d01e0a1bb9446c96aa65e1072585d2.png
[92be7a1215164dd494565ce613206298.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bfaf2044bc4b493687392857c64f80bf.png
[16d2f8c7042740519886815a0a0c7f70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5d223a71a91a49389ce24341603041d4.png
[8a25eeff97e240ccb637abe56990c8b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e39f6eedd346439c8949a460331213f1.png
[a9a2e185dc594f08adf70cdfde6aa39c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0f13dc70471a42a5989731723895d63e.png