首先安裝最新的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.ts和shims.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。