vue3+typescript项目开发（一）升级相关组件

偏执的太偏执、 2022-02-20 00:29 427阅读 0赞

使用vue2开发项目2年了，那个时候typescript还没有流行，一晃2年过去了，现在已经vue3+typescript大行其道了，所以打算还是把自己的项目升级一下。

第一步：自然是升级node

https://nodejs.org/en/   到官网下载最新稳定版本进行安装

我安装的是10.15.3 LTS

第二步：升级vue-cli 重新安装vue-cli

cnpm install -g @vue/cli

输入命令vue --version 查看下版本信息

3.5.5

第三步：升级npm

npm install npm@latest -g

第四步：创建项目

执行：vue create go-eplat-manage

此处有两个选择：

default (babel, eslint)默认套餐，提供babel和eslint支持

Manually select features自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。我选择的就是这一项

对于每一项的功能，此处做个简单描述：

*  TypeScript 支持使用 TypeScript 书写源码
 *  Progressive Web App (PWA) Support PWA 支持。
 *  Router 支持 vue-router 。
 *  Vuex 支持 vuex 。
 *  CSS Pre-processors 支持 CSS 预处理器。
 *  Linter / Formatter 支持代码风格检查和格式化。
 *  Unit Testing 支持单元测试。
 *  E2E Testing 支持 E2E 测试。

点击空格进行选中 我选择了 TypeScript 、Router，Vuex，CSS Pre-processors，Linter / Formatter

创建后的项目如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
进入项目目录，执行命令

cnpm run server

启动成功后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]

在浏览器中输入http://localhost:8080/，如果展示出下面的界面，表示项目搭建成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: /images/20220220/0df57d9e44a84381bb022dc0197aec80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 1]: /images/20220220/4e357a34708642b0813c365c45a52bbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70 2]: /images/20220220/5e45504d946b4f1cbae21f7cf3e4921d.png