一,创建项目

使用 npm 安装 vue-cli 3 和typescript

npm i -g @vue/cli typescript

使用vue create命令快速搭建新项目的脚手架

vue create vue-ts

vue-ts 是我们的项目名称,执行上面的命令后,出现如下选项

这里是单项选择,可以按上/下键切换选项,按enter进入下一步。这两个选项分别表示:

  • default 是默认选项,后面的 babeleslint 表示只会引入这两个
  • Manully select features 是手动选择

因为我们要用到 Vue+TypeScript,所以选择 Manully select features

enter,进入下一步:

这里是多项选择,按上/下键切换选项,空格键选择该选项,enter键进入下一步。你可以根据项目的实际情况,选择相应的选项。

这里我准备做一个vue-ts学习笔记,后面还会继续学习如何在TypeScript中使用 vuex 和router,所以选择 BabelTypescriptRouterVuexCSS Pre-processorsLinter/ 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时,ESLintPrettier相冲突的配置项会被关闭,采用的是Prettier的配置项。这个文档,列出了ESLintPrettier冲突的配置项。

由于个人习惯于 使用单引号字符串 和 句尾无分号,但是Prettier会将字符串格式化为双引号,并在句尾自动添加分号,因此需要单独配置。配置方法也很简单:

在项目根目录下(与 package.json 同级目录)创建一个 .prettierrc.js文件,并加上以下配置就可以了:

修改.eslintrc.js文件,加上这行代码就可以了:

现在我们来看一下是否配置成功了。先打开 sr/main.ts:

可以看到,双引号字符串 和 句尾的分号 都报错了,这时只需按ctr + s保存,就可以自动修正所有报错了。

使用Vue-cli3搭建Vue+TypeScript项目的更多相关文章

  1. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  2. 使用Vue cli3搭建一个用Fetch Api的组件

    系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...

  3. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  4. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  5. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

  6. 利用脚手架vue cli搭建vue项目

    vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...

  7. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

  8. 最简单的实体手机测试移动端前端Vue Cli3搭建网站的方法

    手机和PC同用一个路由的情况下,直接在手机的浏览器上输入Ip: 192.168.1.100:8080 就能看到了. 其中192.168.1.100是PC的IP.不同的自己改下就好. 就这么简单.啥都不 ...

  9. 【vue】搭建vue环境以及要安装的所有东西

    参考地址: https://www.cnblogs.com/laizhouzhou/p/8027908.html

  10. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

随机推荐

  1. 11-Django站点管理

    站点管理 内容发布的部分由网站的管理员负责,包括查看.添加.修改.删除数据 开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地生成管理模块 在Django ...

  2. OpenGL入门1.7:摄像机

    每一个小步骤的源码都放在了Github 的内容为插入注释,可以先跳过 前言 我们已经知道了何为观察矩阵以及如何使用观察矩阵移动场景(我们向后移动了一点) OpenGL本身没有摄像机(Camera)的概 ...

  3. .net core下使用DbProviderFactories.GetFactory("")无法创建工厂的解决方案

    前言:我们有时候会有一种需求,需要连接很多的数据库,如:mysql,sqlserver,oracle等等,需要把这些数据库里的数据抽取出来加工后,返回给客户端使用. 在.net framework中是 ...

  4. String trim() ,去除当前字符串两边的空白字符

    package seday01;/** * String trim() * 去除当前字符串两边的空白字符 * @author xingsir */public class TrimDemo { pub ...

  5. 爬虫框架-selenium

    selenium介绍: selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟 ...

  6. ASP.Net MVC 路由及路由调试工具RouteDebug

    一.路由规则 1.可以创建多条路由规则,每条路由的name属性不相同 2.路由规则有优先级,最上面的路由规则优先级越高 App_Start文件下的:RouteConfig.cs public stat ...

  7. java笔记----cpu消耗快速定位代码

    下载ProcessExplorer ProcessExplorer下载地址:ProcessExplorer 下载运行代码 打开ProcessExplorer 查看javaw.exe的pid jstac ...

  8. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  9. IOS疯狂基础之模态显示PresentModalViewController(转)

    转自:http://blog.csdn.net/wudizhukk/article/details/8553554 -(void)buttonDown:(id)sender{ ViewTwo *two ...

  10. MD5哈希算法及其原理

    - MD5功能 MD5算法对任意长度的消息输入,产生一个128位(16字节)的哈希结构输出.在处理过程中,以512位输入数据块为单位. - MD5用途及特征 MD5通常应用在以下场景: 1.防篡改,保 ...