Vue入门&安装&可视化管理工具

深碍√TFBOYSˉ_ 2024-04-08 10:30 76阅读 0赞

### Vue.js入门&安装&基础语法 ###

第一种，直接用

### 第二种模式安装教程： ###

##### 1. 需要安装Node.js 官方地址：[https://nodejs.org/en/][https_nodejs.org_en] #####

![在这里插入图片描述][72b508e662584d5fb0e739e8c4397e19.png_pic_center]

> 傻瓜式安装，一直next就可以了 安装后的查看是否安装成功，cmd命令打开终端，输入npm，出现一堆命令行说明安装成功！

![在这里插入图片描述][ac3db81dcfd74ef282d2c880fb4f5339.png_pic_center]

也可以输入node --version查看版本号

##### 2.命令行工具(CLI) #####

> Vue提供了一个官方的CLI，为单页面应用(SPA)快速搭建繁杂的脚手架。 安装脚手架CLI  
> 地址：https://cli.vuejs.org/zh/

![在这里插入图片描述][1d843db585d44b229ec60e359c2f37ef.png_pic_center]

![在这里插入图片描述][ad429f68d3b549af8ceac380e6cfbda3.png_pic_center]

安装后，你就可以在命令行中访问vue命令（npm run dev）。来验证它是否安装成功

##### 3.创建vue项目 #####

使用vue create my\_project命令 创建一个项目（自定义项目名my\_project）  
运行后：  
![在这里插入图片描述][0a2fbba8be2c410c81e58c6e489f58e8.png_pic_center]

可选择自定义  
![在这里插入图片描述][f02836af10db414db3b55ff1557acf9e.png_pic_center]

![在这里插入图片描述][8d5117ea49ca44a8ab527d96488eb0c4.png_pic_center]

![在这里插入图片描述][9ee40893f56c4a849de8b45effc85f45.png_pic_center]

![在这里插入图片描述][37458f3ef8704deda285644bcf013429.png_pic_center]  
![在这里插入图片描述][c13da5423f6c4edfafcac266a743c835.png_pic_center]

![在这里插入图片描述][a66d2ebf5ed74a5b8b6100ef711aa26d.png_pic_center]

![在这里插入图片描述][03a6accd14534577967be435a19a1ff2.png_pic_center]

根据自己创建项目的路径，找到完整的vuejs项目：  
![在这里插入图片描述][14b329bd6c9e4cc6a854ea35988ca872.png_pic_center]

##### 可以使用VSCode打开,下载地址：[https://code.visualstudio.com/][https_code.visualstudio.com] #####

下载出来的压缩包，一直点击下一步即可。就可以安装成功！  
![在这里插入图片描述][4fc2b63d89c74733a52c7ad361bb4db3.png_pic_center]

##### 直接下载压缩包，镜像链接：[https://vscode.cdn.azure.cn/stable/054a9295330880ed74ceaedda236253b4f39a335/VSCode-win32-x64-1.56.2.zip][https_vscode.cdn.azure.cn_stable_054a9295330880ed74ceaedda236253b4f39a335_VSCode-win32-x64-1.56.2.zip] #####

打开后：  
![在这里插入图片描述][7b693a40a5d34b5c8e370d082cd290dd.png_pic_center]

可以安装辅助插件：  
![在这里插入图片描述][5e57f789238e44969a59760c65ac2928.png_pic_center]

插件推荐：Chinese (Simplified) 中文  
Vetur (必装)高亮插件

### 附带：小技巧 ###

#### 使用vue-ui可视化管理工具来创建项目 ，并动态安装插件。 ####

##### 1.在准备新建项目的目录下打开输入cmd #####

![在这里插入图片描述][64971e6e74984723a70b85bcfa99c340.png_pic_center]

![在这里插入图片描述][f48290ad5e284c2a847e211734f0e083.png_pic_center]

##### 2.浏览器窗口页面如下 #####

![在这里插入图片描述][407b2802f915443bb894012a9201d223.png_pic_center]

##### 3.创建项目 #####

![在这里插入图片描述][7b4e2243806e450883e942a96bfddb91.png_pic_center]  
![在这里插入图片描述][ee5b4e884d56416997a91532b5ecca71.png_pic_center]

输入项目文件夹，以及包管理器,这里选择npm，点击下一步  
选择一套预设，这里选择默认，后续可以自己手动配置或者远程从git仓库拉取。  
选择完成后，点击创建项目

##### 4.此时应会提示正在安装Vue Cli插件，等待一段时间，创建完成后如下 #####

![在这里插入图片描述][367546c1598944c29eddfd67b7be7fa4.png_pic_center]

##### 5.运行项目 #####

点击任务，选择server，再点击运行，可以查看输出以及控制台  
![在这里插入图片描述][064008c069e44f68b981a293d05415df.png_pic_center]

![在这里插入图片描述][32e4b547191c4ff6b3bd6649bf40a933.png_pic_center]

##### 6.运行结果 #####

![在这里插入图片描述][b2fd528d361240c5a0d692917ff9fc2f.png_pic_center]

--------------------

![在这里插入图片描述][ddecfd27771e44b29cdb84d80f9b80b9.jpeg_pic_center]

> 各位看官》创作不易，点个赞！！！  
> 诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

[小白五分钟创建springboot+vue前后端分离][springboot_vue]

[https_nodejs.org_en]: https://nodejs.org/en/
[72b508e662584d5fb0e739e8c4397e19.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e4ccc9ae27bd45a3a5d56818b30aaf0c.png
[ac3db81dcfd74ef282d2c880fb4f5339.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/dbacd87eec1344019c1c5c46a87d3373.png
[1d843db585d44b229ec60e359c2f37ef.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/00d703dba39243959819c32577a51fe4.png
[ad429f68d3b549af8ceac380e6cfbda3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/51dd19b772e74acc86f14b88288a290f.png
[0a2fbba8be2c410c81e58c6e489f58e8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fbca87b23d0e4708bb29209461780b22.png
[f02836af10db414db3b55ff1557acf9e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c84b4862fbcc468f9373614eb60d5b08.png
[8d5117ea49ca44a8ab527d96488eb0c4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0189b153b7564760b210e243743ab4d6.png
[9ee40893f56c4a849de8b45effc85f45.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f64304c27905411daf28b6595430c8d1.png
[37458f3ef8704deda285644bcf013429.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6085f937337a487a80ceb665b7b89eb7.png
[c13da5423f6c4edfafcac266a743c835.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/44cc8e5ccfa84e4dab1bab1b465d6803.png
[a66d2ebf5ed74a5b8b6100ef711aa26d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b07c029dc71145e7b5c41eae91cea9a3.png
[03a6accd14534577967be435a19a1ff2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/984f232390a148fd92bb1e69ddef74e4.png
[14b329bd6c9e4cc6a854ea35988ca872.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/78a8177e6de24ea3a2bef1091f416745.png
[https_code.visualstudio.com]: https://code.visualstudio.com/
[4fc2b63d89c74733a52c7ad361bb4db3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fa824763f6c1406a8cf2ebbe9335a312.png
[https_vscode.cdn.azure.cn_stable_054a9295330880ed74ceaedda236253b4f39a335_VSCode-win32-x64-1.56.2.zip]: https://vscode.cdn.azure.cn/stable/054a9295330880ed74ceaedda236253b4f39a335/VSCode-win32-x64-1.56.2.zip
[7b693a40a5d34b5c8e370d082cd290dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9adcc74238824349b3e4eb17fa49a079.png
[5e57f789238e44969a59760c65ac2928.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5dd36b8c3bad4fdb873a74d98e6811eb.png
[64971e6e74984723a70b85bcfa99c340.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fbf59a3d463042f9a9163b340cea3a50.png
[f48290ad5e284c2a847e211734f0e083.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3aa4fa7ab44f408081d2bb9b3fe0fdcf.png
[407b2802f915443bb894012a9201d223.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d2e8d5d717fb49129b5d596900f1a878.png
[7b4e2243806e450883e942a96bfddb91.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/204ef7455f9a42b5a13e0255c8450133.png
[ee5b4e884d56416997a91532b5ecca71.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0187609343494f219f96aa91be1fd78e.png
[367546c1598944c29eddfd67b7be7fa4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c5ae2f0b6f96424b9ebb493e8d3c9891.png
[064008c069e44f68b981a293d05415df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0ce3136c901f4e9281598e839d91d2c6.png
[32e4b547191c4ff6b3bd6649bf40a933.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a1dfaded6fcd4d3384ed53628932fe85.png
[b2fd528d361240c5a0d692917ff9fc2f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/363ed841499b417e98892cebfdc501c3.png
[ddecfd27771e44b29cdb84d80f9b80b9.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/bf15eac22c1b4214b0d825ad46ec542d.jpeg
[springboot_vue]: https://blog.csdn.net/SoulNone/article/details/126445686