使用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. ...
随机推荐
- vue中template的作用及使用
先来看一个需求:下图div用v-for做了列表循环,现在想要span也一起循环,应该怎么做? 有3种方法可以实现 ①:直接用v-for对span也循环一次(该方法虽然可以使用,但不要用这种方式,因为 ...
- gcc 编译安装
wget https://kojipkgs.fedoraproject.org//packages/gcc/7.1.1/1.module_1a179a7b/src/gcc-7.1.1-1.module ...
- EF框架访问access数据库入门(后附官方推荐“驱动”版本)
vs2017调试通过. 1.添加需要的provider,有点添加驱动的意思.右击项目,NUGET “浏览”,“JetEntityFrameworkProvider”,安装,如图 完成后配置文件(控制台 ...
- Docker配置yapi接口
一.安装Docker 第一步:yum 包更新到最新 sudo yum update 第二步:安装需要的软件包 yum-util 提供yum-config-manager功能,另外两个是devicema ...
- springBoot 集成Mysql数据库
springBoot 集成Mysql数据库 前一段时间,我们大体介绍过SpringBoot,想必大家还有依稀的印象.我们先来回顾一下:SpringBoot是目前java世界最流行的一个企业级解决方案框 ...
- 敏捷软件开发_UML<一>
敏捷软件开发_UML 所看书籍是:敏捷软件开发_原则.模式与实践_C#版(美)马丁著,这本书写的非常棒,感谢作者.该归纳总结的过程按照我读的顺序写. UML 在建造桥梁,零件,自动化设备之前需要建 ...
- Threads(异步和多线程)
Task是.NET Framework4.5出现的,线程是基于线程池的,然后提供丰富的api,Thread方法很多很强大,但是太过强大,没有限制. DoSomethingLong方法如下: /// & ...
- FCC---Create Movement Using CSS Animation---设计一个盒子上下左右移动,结合animation, @keyframe, position (上下左右的offset)
When elements have a specified position, such as fixed or relative, the CSS offset properties right, ...
- 创建Npm脚手架
1工具 l Npm ( https://nodejs.org/en/ ) l Yeoman (npm install -g yo) l generator-generator (npm inst ...
- 使用JS通过Web API执行批量操作,多个操作是一个事务!
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复235或者20161105可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...