vue cli構建 typescript項目

首先安裝最新的vue cli腳手架,

npm install --global @vue/cli

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

+ @vue/[email protected]
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 瀏覽器前綴。)

 browserslist的配置文件:
> 1% 兼容全球使用率大於1%的遊覽器
last 2 versions 兼容每個遊覽器的最近兩個版本
not ie <= 8 不兼容ie8及以下
具體可見 browserslist。

babel.config.js:Babel 是一個工具鏈,主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法,以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
postcss.config.js:用於配置將px轉化成rem,和自動添加CSS瀏覽器前綴等。
esnext 是一個 JavaScript 庫,可以將 ES6 草案規範語法轉成今天的 JavaScript 語法。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章