vue cli构建 typescript项目

首先安装最新的vue cli脚手架,

npm install --global @vue/cli

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/cli@4.4.6
added 1230 packages from 670 contributors in 118.122s


vue -V

@vue/cli 4.4.6


vue create my-project-name

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: ts_tmpl


⚓  Running completion hooks...

�  Generating

�  Successfully created project my-project-name.
�  Get started with the following commands:

 $ cd my-project-name
 $ npm run serve


E:\vue_codes>cd my-project-name

E:\vue_codes\my-project-name>npm run serve

> my-project-name@0.1.0 serve E:\vue_codes\my-project-name
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 5304ms                                                                      上午11:13:54

No type errors found
Version: typescript 3.9.7
Time: 3160ms

  App running at:
  - Local:   http://localhost:8080/
  - Network:

  Note that the development build is not optimized.
  To create a production build, run npm run build.




shims-vue.d.ts由于 TypeScript 默认并不支持 *.vue 后缀的文件,所以在 vue 项目中引入的时候需要创建一个shims-vue.d.ts 文件,放在项目项目对应使用目录下,例如 src/shims-vue.d.ts,用来支持*.vue 后缀的文件

shims-tsx.d.ts允许.tsx 结尾的文件,在 Vue 项目中编写 jsx 代码


normalize.css:Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。Normalize.css是一种CSS reset的替代方案。

.browserslistrc:这个配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置,Browserslist这个东西单独是没用的,(补充: 在vue官方脚手架中,browserslist字段会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。)

> 1% 兼容全球使用率大于1%的游览器
last 2 versions 兼容每个游览器的最近两个版本
not ie <= 8 不兼容ie8及以下
具体可见 browserslist。

babel.config.js:Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
esnext 是一个 JavaScript 库,可以将 ES6 草案规范语法转成今天的 JavaScript 语法。