如何搭建一个完整的Vue3.0 + ts 的项目

如何搭建一个完整的Vue3.0 + ts 的项目

相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本)。所以Vue3.0的学习是我们必然的趋势,今天,主要分享一下Vue3.0的详细搭建过程,希望可以为初入Vue3的小伙伴有所帮助。

我们现在开始进入今天的主题啦~~

一、安装

1. 安装nodejs

此处提供nodejs下载地址:https://nodejs.org/zh-cn/download/

  • 大家根据自己电脑的配置选择适配的LTS(最新稳定版本进行下载,安装即可,此处略去安装步骤。

2.卸载旧版本

如果你现在正在用旧版的Vue-cli1.x或者Vue-cli2.x 需要先进行卸载;如果没有,请忽略此步骤

  • 打开命令窗口,用以下命令进行卸载:
npm uninstall vue-cli -g
复制代码

3.安装Vue-cli 3.x

  • 搭建Vue3.0的项目,必须依赖Vue-cli 3.0或者以上的版本,打开命令窗口,通过以下命令进行安装和查看版本号:
// 安装最新版的vue-cli
npm install -g @vue/cli   
// 查看版本号
vue -V                
复制代码

二、项目搭建过程

1.新建项目,以下我新建一个名称为my-demo的项目

vue create my-demo
复制代码

2.enter之后,根据项目提示,接下来会让你选择一个预设:

newTs : 在项目创建完成的最后,会询问你需不需要保持本次配置,方便下次直接使用;这个newTs就是我之前保存好的一个预设配置
Default:默认的预设配置,会快速构建一个项目,提供了babel和eslint的支持
Manually select features:手动进行项目配置,可以根据项目的需要选择合适的依赖,具备更多的选择性,以下步骤,我将会采用该种方式。
复制代码

3. Vue-cli3.x 将提供以下特性供选择,大家可以根据项目需要进行选择添加的配置项:

通过上下键进行配置项切换,对需要选择的配置项使用空格键进行选中/反选

Babel:使用babel,便于将我们源代码进行转码(把es6=>es5)
TypeScript:使用TypeScript进行源码编写,使用ts可以编写强类型js,对我们的开发有很大的好处
Progressive Web App(PWA):使用渐进式网页应用(PWA)
Router:使用vue-router
Vuex:使用vuex状态管理器
CSS Pre-processors:使用CSS预处理器,比如:less,sass等
Linter/Formatter:使用代码风格检查和格式化
Unit Testing:使用单元测试
E2E Testing:使用E2E测试, end to end(端到端)是黑盒测试的一种
复制代码

4.然后对每个选中的配置项进行配置

  • Use class-style component syntax? (Y/n)

是否使用Class(类)风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例 

  • Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用Babel做转义, 与TypeScript一起用于自动检测 

  • Use history mode for router?

路由模式, 是否选择history模式,启用history模式,项目build之后,可能会出现打开页面空白的情况哦 

  • Pick a CSS pre-processor?

选择一种css 预处理器, 在这里我选择less 

  • Pick a linter / formatter config?

选择一种代码格式化检测工具 

TSLint: ts格式检验工具
ESLint with error prevention only: ESLint 只会进行错误提醒
ESLint + Airbnb config: ESLint Airbnb标准
ESLint + Standard config: ESLint Standard 标准
ESLint + Prettier: ESLint(代码质量检测)+ Prettier(代码格式化工具)
复制代码
  • Pick additional lint features?

代码检查方式: 保存时检查 or 提交时检查; 我选择, 保存时检查 

  • Pick a unit testing solution?

选择一种单元测试的方案,目前Vue官方推荐也是jest, 相比而言, 配置简单容易上手, 建议选择Jest啦 

  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

Babel, PostCSS, ESLin等配置文件怎么存放, 是放到单独的配置文件中?还是package.json里? 这里方便配置清晰好看, 我选择每个配置单独文件。 

  • Save this as a preset for future projects?

是否需要保存当前配置,在以后的项目中可快速构建? 保存后, 后续创建项目时可以直接选择该配置, 不需单独配置 

5.配置完成后,等待依赖安装完成

 

6.构建完成后,项目目录结构如下

 相比Vue2.x, Vue3.0的目录确实精简了很多, 而且我们会发现, Vue3.0不在有webpack.config.js的配置, 是因为Vue3.0 通过插件@vue/cli-service对webpack进行抽象处理, 并默认了webpack的配置。但是项目开发中,我们肯定会存在一些特殊的需求需要调整webpack, 当然这也是没有问题, 在Vue3.0当中, 可以通过在项目的根目录创建vue.config.js对webpack进行自定义配置。

关于vue.config.js 的配置我会单独写一篇文章进行分享

三、启动项目:

cd my-demo
npm run serve
复制代码

至此,Vue3.0完整的项目搭建过程就完成,后面我会单独分享Vue3.0中vue.config.js 的配置; 文章中有错误的地方,欢迎提出指正,感谢大家

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/547572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#下2\10\16进制互转代码总汇

1、十进制转换其他:Convert.ToString(十进制数字, 2|8|16进制模式) //十进制转二进制Convert.ToString(69, 2);//十进制转八进制Convert.ToString(69, 8);//十进制转十六进制Convert.ToString(69, 16); 2、其他进制转换十进制:Convert.ToInt32(待转换数…

手机客户端和服务器端通信

2019独角兽企业重金招聘Python工程师标准>>> 手机客户端与服务器端的通信,不同于浏览器与服务器端的通信。浏览器和服务器端的通信依靠session去维持一个会话, 当这一切搬到手机上仿佛一切都失效了。 1.在上一家公司的时候公司同事曾经问过我…

linux下boot文件是什么文件,Boot.ini是什么文件?Boot.ini文件在哪里

Boot.ini 文件是系统启动引导程序文件,装多系统或者重装系统的时候会用到它。因此,由于系统启动而造成的问题也不在少数,那Boot.ini是什么文件呢?Boot.ini文件在哪里?下面就跟小编一起去了解一下吧!步骤如下…

Kubeflow使用Kubernetes进行机器学习GPU分布式训练

Kubeflow使用Kubernetes进行机器学习 Kubeflow是Google推出的基于kubernetes环境下的机器学习组件,通过Kubeflow可以实现对TFJob等资源类型定义,可以像部署应用一样完成在TFJob分布式训练模型的过程。最初的设计是将Kubernetes和Tensorflow结合实现对Te…

Net操作配置文件(Web.config|App.config)通用类

一、Net操作web.config通用类(代码如下): using System;using System.Configuration;using System.Web;using System.Web.Configuration;/// ConfigurationOperator 的摘要说明public class ConfigurationOperator : IDisposable{private Con…

hibernate 程序运行时的错误,及解决办法(不定期更新)

这个错误是因为&#xff1a;没有配置hibernate.cfg.xml中的最后一项 <mapping resource"org/hibernate/first/model/Student.hbm.xml"/>这个错误是因为&#xff1a;在配置hibernate缓存的时候出的错&#xff0c;我就把我这个缓存代码删除掉了。代码如下<pro…

嵌入式linux设计师,make在linux——《嵌入式linux设计与应用》

程序模块的内部关系决定了源程序编译和链接的顺序。通过建立makefile可以描述模块间的 相互依赖关系。make命令从中读取这些信息&#xff0c;然后根据这些信息对程序进行管理和维护。在makefile 里主要提供的是有关目的文件与依靠文件之间的关系&#xff0c;还指明了用什么命令…

kubernetes集群使用GPU及安装kubeflow1.0.RC操作步骤

kubernetes集群使用GPU及安装kubeflow1.0.RC操作步骤 Kubeflow使用场景 希望训练tensorflow模型且可以使用模型接口发布应用服务在k8s环境中(eg.local,prem,cloud) 希望使用Jupyter notebooks来调试代码&#xff0c;多用户的notebook server 在训练的Job中&#xff0c;需要对…

T-Sql备份还原数据库

代码如下&#xff1a; -- 备份数据库BACKUP DATABASE 数据库名称 TO DISK 物理存储位置 WITH FORMAT,CHECKSUM -- 还原数据库alter database 数据库名称 set offline with rollback immediate -- 设置数据库脱机RESTORE FILELISTONLY From disk 待还原文件地址 --查询待…

PHP拦截器的使用(转)

PHP有如下几个拦截器&#xff1a; 1、__get($property)功能&#xff1a;访问未定义的属性是被调用2、__set($property, $value)功能&#xff1a;给未定义的属性设置值时被调用3、__isset($property)功能&#xff1a;对未定义的属性调用isset()时被调用4、__unset($property)功能…

linux线程负载,linux 排查cpu负载过高异常(转载)

问&#xff1a;如何定位是哪个服务进程导致CPU过载&#xff0c;哪个线程导致CPU过载&#xff0c;哪段代码导致CPU过载&#xff1f;步骤一、找到最耗CPU的进程工具&#xff1a;top方法&#xff1a;执行top -c &#xff0c;显示进程运行信息列表键入P (大写p)&#xff0c;进程按照…

Net操作Excel(终极方法NPOI)

前言 Asp.net/C#操作Excel已经是老生长谈的事情了&#xff0c;可下面我说的这个NPOI操作Excel&#xff0c;应该是最好的方案了&#xff0c;没有之一&#xff0c;使用NPOI能够帮助开发者在没有安装微软Office的情况下读写Office 97-2003的文件&#xff0c;支持的文件格式包括xl…

WIN10自带远程桌面实现多用户登录

一台主机当两台用&#xff0c;利用WIN10自带远程桌面实现多用户登录 2020-04-27 10:51:24 54点赞 311收藏 35评论 先来说说家里电脑和网络的基本情况。 新房装修时就考虑到家庭多媒体和自己变态的各种网络需求&#xff0c;所以全屋用企业级的网络设备组成了千兆网&#xff0…

PingingLab传世经典系列《CCNA完全配置宝典》-2.7 EIGRP基本配置

2.7 EIGRP基本配置实验目的&#xff1a;1、掌握EIGRP的基本配置。2&#xff0e;掌握EIGRP的邻居表、拓扑表、路由表。3&#xff0e;掌握EIGRP的无类特性。实验拓扑&#xff1a;实验步骤&#xff1a;1、依据图中拓扑配置各设备的IP地址&#xff0c;并保证直连连通性;在R1上做如下…

linux通过ip计算广播地址,子网掩码、网络地址、广播地址的计算

例如 192.168.1.53/27 如何计算出它的子网掩码、网络地址、广播地址、可用的主机数和最大可容纳主机数、可用的IP地址。子网掩码和主机数&#xff1a;192.168.1.53/27为例讲解&#xff0c;这就是平时说的&#xff23;类IP地址&#xff0c;平时大家用的是192.168.0.*或192.168.1…

KubeFlow安装指南

【摘要】 Kubeflow是Google推出的基于kubernetes环境下的机器学习组件&#xff0c;通过Kubeflow可以实现对TFJob等资源类型定义&#xff0c;可以像部署应用一样完成在TFJob分布式训练模型的过程。 组件 http://pachyderm.io/ http://www.argoproj.io/ Kubeflow使用场景 希望…

c#字符相似度对比通用类

本类适用于比较2个字符的相似度&#xff0c;代码如下&#xff1a; View Code using System;using System.Collections.Generic;using System.Text;public class StringCompute{#region 私有变量/// <summary>/// 字符串1/// </summary>private char[] _ArrChar1;/…

linux 日记函数,每日记一些php函数,jQuery函数和linux命令(一)

每天记一些php函数&#xff0c;jQuery函数和linux命令(一)简介&#xff1a;学习完了php和jQuery之后&#xff0c;对函数的记忆不到位&#xff0c;导致很多函数没记住&#xff0c;所以为了促进自己的记忆&#xff0c;每天花一点时间来写这个博客。时间&#xff1a;2016-12-18 …

蒋家骏_百度百科

蒋家骏_百度百科蒋家骏

基于Kubernetes的Spark部署完全指南

基于Kubernetes的Spark部署完全指南 【编者的话】本文是在Kubernets上搭建Spark集群的操作指南&#xff0c;同时提供了Spark测试任务及相关的测试数据&#xff0c;通过阅读本文&#xff0c;你可以实践从制作Spark镜像、搭建Spark容器集群&#xff0c;到在集群上运行测试任务的…