VUE3.0学习系列随笔（一）：VUE3.0项目初始化

男娘i 2023-01-08 14:26 138阅读 0赞

### VUE3.0学习系列随笔（一）：VUE3.0项目初始化 ###

#### 1、VUE3.0简介 ####

VUE3.0相对于VUE2.0的提升主要有以下几点：

*  Performance：性能更比Vue 2.0强。
 *  Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。
 *  Composition API：组合API Fragment, Teleport,
 *  Suspense：“碎片”，Teleport即Protal传送门，“悬念”
 *  Better TypeScript support：更优秀的Ts支持
 *  Custom Renderer API：暴露了自定义渲染API

#### 2、安装vue-cli3 ####

如果安装过vue-cli2.0或者vue-cli1.0，需要先行卸载vue-cli，然后在安装vue-cli3，卸载命令为：

npm uninstall vue-cli -g

VUE3.0所对应的vue-cli安装命令和vue2.0存在差异：

npm install -g @vue/cli

安装过程截图：  
![在这里插入图片描述][20210120144840917.png]  
安装完成截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]

##### 注意：安装过程中如果出现错误，或者安装失败，可以重新执行安装命令。 #####

#### 3、初始化VUE3.0项目 ####

VUE3.0项目初始化和VUE2.0存在差异，拥有两种初始化方式：

1、图形化界面：vue ui
    2、命令行界面：vue create 项目名称

#### （1）图形化界面 ####

##### （a）打开图形化界面 #####

选择VUE3.0项目创建根目录运行cmd，执行图形化界面命令，即可打开VUE项目创建界面  
![在这里插入图片描述][2021012110023379.png]

界面如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]

##### （b）创建项目 #####

点击创建，会以当前目录为项目根目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]  
点击在此创建新项目

##### （c）配置项目详情 #####

主要是配置项目名称、包管理器和git管理，配置完成之后点击下一步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]

##### （d）配置项目预设包 #####

如果是第一次配置预设包，建议选择手动配置项目，即Manual模式，手动模式可以添加额外的包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 4]

手动添加的包为：Router（路由管理）和VUEX（状态管理）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 5]

##### （e）VUE项目其他配置 #####

配置VUE项目的版本、路由模式和代码规范检查  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 6]  
配置完成后，点击创建项目，保存新的项目预设模式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 7]  
选择之后，开始进入项目创建阶段，这个地方需要等待几分钟。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 8]  
同时，命令行界面开始执行创建项目的流程  
![在这里插入图片描述][20210121101057826.png]

##### （f）项目创建成功，自动进入项目管理页面 #####

命令行界面：  
![在这里插入图片描述][2021012110192957.png]  
ui界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 9]  
此时，使用图形化界面整个VUE3.0项目创建流程完毕。

包含router路由的VUE3.0项目工程下载地址为：[https://download.csdn.net/download/qq\_26666947/14909263][https_download.csdn.net_download_qq_26666947_14909263]

#### （2）命令行界面 ####

选择项目保存位置，执行创建vue3.0命令：

vue create 项目名称

回车，选择创建项目预设模式，这里选择VUE3默认模式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 10]  
点击回车，等待项目加载，项目加载成功则为以下界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 11]  
运行项目，按照蓝字提示，进入VUE3.0项目界面，运行项目，项目运行成功会显示运行端口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 12]  
在浏览器中访问项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 13]  
脚手架搭建的前端初始工程下载地址为：[https://download.csdn.net/download/qq\_26666947/14909223][https_download.csdn.net_download_qq_26666947_14909223]

[20210120144840917.png]: /images/20221119/70532d1c15804e4d8090a343ebceaa6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221119/d762f63aef954db08fbe6b69750b7777.png
[2021012110023379.png]: /images/20221119/10fac2fa9bfa40f89813a65ce880a98c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 1]: /images/20221119/fddfe6f039e1434cad8aca9be6fd44af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 2]: /images/20221119/a73e232b6f3440ab9dd6616892a6f5b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 3]: /images/20221119/68da6c13e3124dfc924acd705162594e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 4]: /images/20221119/7571edde928e48ea96da9bd6e3dd86e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 5]: /images/20221119/d9845347d5f54dc59069a9bc141c561d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 6]: /images/20221119/596184739b044879b4352ab229de8e1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 7]: /images/20221119/5689af15eebc46f8a6239403f61e1219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 8]: /images/20221119/e904177832f1441593ce9dca01dbaf0a.png
[20210121101057826.png]: /images/20221119/b5390b27a4134e24a745bdbd0c5ad29e.png
[2021012110192957.png]: /images/20221119/c3892ffba418493a9a2f8794f6730432.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 9]: /images/20221119/1a045ee9e64a42309e7d8aed353378b2.png
[https_download.csdn.net_download_qq_26666947_14909263]: https://download.csdn.net/download/qq_26666947/14909263
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 10]: /images/20221119/93435c6e68a34643b3b95c694fefbfb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 11]: /images/20221119/78a4e044501d433baf102620e06da453.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 12]: /images/20221119/d42411250ec644098be691bf3c13ded7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70 13]: /images/20221119/fb102ca8ff96465894088cc03d042b92.png
[https_download.csdn.net_download_qq_26666947_14909223]: https://download.csdn.net/download/qq_26666947/14909223