首先安装最新的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。