• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue+typescript构建项目

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

第一步:自然是升级node

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

我安装的是10.15.3 LTS

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

cnpm install -g @vue/cli  
  • 1

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

3.5.5
  • 1

第三步:升级npm

npm install [email protected] -g
  • 1

第四步:创建项目

执行:vue create go-eplat-manage
  • 1

此处有两个选择:

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

创建后的项目如下:

进入项目目录,执行命令

cnpm run server
  • 1

启动成功后

在浏览器中输入http://localhost:8080/,如果展示出下面的界面,表示项目搭建成功。

      </div>
      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
              </div>

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

第一步:自然是升级node

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

我安装的是10.15.3 LTS

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

cnpm install -g @vue/cli  
  • 1

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

3.5.5
  • 1

第三步:升级npm

npm install [email protected] -g
  • 1

第四步:创建项目

执行:vue create go-eplat-manage
  • 1

此处有两个选择:

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

创建后的项目如下:

进入项目目录,执行命令

cnpm run server
  • 1

启动成功后

在浏览器中输入http://localhost:8080/,如果展示出下面的界面,表示项目搭建成功。

      </div>
      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
              </div>

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript-泛型发布时间:2022-07-18
下一篇:
LayaIDE报typescript编译版本不一致的错发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap