经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
vue cli构建 typescript项目
来源:cnblogs  作者:邹琼俊  时间:2020/7/30 9:10:33  对本文有异议

首先安装最新的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 README.md...

?  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: http://192.168.1.95:8080/

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

浏览器输入地址访问:http://localhost:8080/

 生成的代码目录结构如下:

 两个声明文件:shims-vue.d.tsshims.tsx.d.ts

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

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

tsconfig.json:typescript配置文件,主要用于指定待编译的文件和定义编译选项

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

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

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

原文链接:http://www.cnblogs.com/jiekzou/p/13396233.html

 友情链接: NPS  问卷模板