使用Vue-cli3搭建Vue+TypeScript项目
一,创建项目
使用 npm
安装 vue-cli 3
和typescript
npm i -g @vue/cli typescript
使用vue create
命令快速搭建新项目的脚手架
vue create vue-ts
vue-ts 是我们的项目名称,执行上面的命令后,出现如下选项
这里是单项选择,可以按上/下键
切换选项,按enter
进入下一步。这两个选项分别表示:
default
是默认选项,后面的babel
,eslint
表示只会引入这两个Manully select features
是手动选择
因为我们要用到 Vue+TypeScript
,所以选择 Manully select features
。
按enter
,进入下一步:
这里是多项选择,按上/下键
切换选项,空格键
选择该选项,enter键
进入下一步。你可以根据项目的实际情况,选择相应的选项。
这里我准备做一个vue-ts学习笔记,后面还会继续学习如何在TypeScript
中使用 vuex
和router
,所以选择 Babel
, Typescript
, Router
, Vuex
, CSS Pre-processors
, Linter/ Formatter
这几项就可以了。
按enter
,进入下一步:
这里是询问是否使用 class风格
的组件语法,为了更方便地使用 TypeScript
,我们选择 Y。
当我们不知道选择那个选项时,可以直接按enter,使用默认选项。
按enter
,进入下一步:
这里不太清楚是什么意思,直接跳过,按enter使用默认选项。
按enter
,进入下一步:
这里是询问是否使用 router
的 history
模式,如果选择是,在生产环境中,服务端需要为索引回退做适当的配置。这个对我们的 demo 没有影响,同样按enter
使用默认选项。
按enter
,进入下一步:
这里是选择CSS预处理器
,可以自行选择一种。
按enter
,进入下一步:
这里是选择代码检查工具,我个人喜欢使用 ESLint + Prettier
。因为 Prettier
不仅可以格式化js代码
,还可以格式化 css
和 vue
模板文件中 template
部分的代码。
按enter
,进入下一步:
这里是选择什么时候进行代码格式化,选择 Lint on save
。
按enter,进入下一步:
这里是询问在什么地方配置 Babel,PostCSS, ESLint
等
In dedicated config files
在专门的配置文件中In package.json
配置在package.json
文件中
我们选择 In dedicated config files
,
按enter
,进入下一步
这里是询问:是否保存本次所选的配置,方便下次搭建项目时复用。
我们直接跳过,按enter,
等待项目初始化完成就可以了。
二,配置 .prettierrc
代码检查工具选择ESLint
+ Prettier
时,ESLint
与Prettier
相冲突的配置项会被关闭,采用的是Prettier
的配置项。这个文档,列出了ESLint
与Prettier
冲突的配置项。
由于个人习惯于 使用单引号字符串 和 句尾无分号,但是Prettier会将字符串格式化为双引号,并在句尾自动添加分号,因此需要单独配置。配置方法也很简单:
在项目根目录下(与 package.json 同级目录)创建一个 .prettierrc.js文件,并加上以下配置就可以了:
修改.eslintrc.js文件,加上这行代码就可以了:
现在我们来看一下是否配置成功了。先打开 sr/main.ts:
可以看到,双引号字符串 和 句尾的分号 都报错了,这时只需按ctr + s保存,就可以自动修正所有报错了。
使用Vue-cli3搭建Vue+TypeScript项目的更多相关文章
- Vue CLI3和Vue CLI2环境搭建
关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...
- 使用Vue cli3搭建一个用Fetch Api的组件
系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- vue脚手架搭建移动端项目--flexible.js
通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...
- 利用脚手架vue cli搭建vue项目
vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...
- vue环境搭建及创建项目
安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...
- 最简单的实体手机测试移动端前端Vue Cli3搭建网站的方法
手机和PC同用一个路由的情况下,直接在手机的浏览器上输入Ip: 192.168.1.100:8080 就能看到了. 其中192.168.1.100是PC的IP.不同的自己改下就好. 就这么简单.啥都不 ...
- 【vue】搭建vue环境以及要安装的所有东西
参考地址: https://www.cnblogs.com/laizhouzhou/p/8027908.html
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
随机推荐
- win7系统下安装Ubuntu18.04组成双系统
最近在闲鱼上花了350大洋淘到了一台tinkpad sl510,这大概是一台发布于2009年的一台电脑了吧,处理器是酷睿二t440,2Gddr3的显卡,让我有点意外的是这台电脑的硬盘是7200转的32 ...
- C# recording audio based on audio in Console
1. Install-package naudio -v 1.9.0 2. using NAudio.Wave; 3. public class NAudioHelper { public WaveI ...
- 5-API 网关 kong 实战
原文:https://cloud.tencent.com/developer/article/1477672 1. 什么是Kong? 目前互联网后台架构一般是采用微服务,或者类似微服务的形式,应用的请 ...
- Dynamics CRM中的操作(action)是否是一个事务(transaction)?
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复168或者20151104可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 以前的博文 微软Dynamics ...
- mysql查询两张表更改一张表数据
(user 为要更改数据的表 ,set后边需要更改的内容, where后加条件) update user a,user_copy b set a.manager_introduct=b.rwjs wh ...
- 钉钉开发第三方H5微应用入门详细教程[ISV][免登流程][授权码][HTTP回调推送][识别用户身份][获取用户信息]
转载请注明原文地址:https://www.cnblogs.com/applerosa/p/11509512.html (by lnexin@aliyun.com 世间草木) 此教程注意点: 适用于第 ...
- 《大话处理器》Cache一致性协议之MESI【转】
转自:https://blog.csdn.net/muxiqingyang/article/details/6615199 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载 ...
- CodeForces - 573A (简单数论+模拟)
题意 https://vjudge.net/problem/CodeForces-573A 有n个数ai ,你可以把每个数任意次×2 或×3 ,问能否最终使得每个数相等. 思路 x2和x3只能改变数 ...
- Jmeter+ant+Jenkins构建接口自动化测试时构建失败 提示:Fatal Error! 字符引用 "&#原因
Jmeter+ant+Jenkins构建接口自动化测试时构建失败 提示:Fatal Error! 字符引用 "&#原因:接口响应数据中有&#
- Mybatis-plus中的常用注解
@TableName:数据库表相关 @TableId:表主键标识 @TableField:表字段标识 @TableLogic:表字段逻辑处理注解(逻辑删除) @TableId(type= IdType ...