Vue CLI 都有哪些模板

1. webpack-simple：简单的 Webpack 模板，适用于小型项目或初学者。
2. webpack：完整的 Webpack 模板，适用于大型项目或需要更多高级配置的项目。
3. browserify：Browserify 模板，用于使用 Browserify 的项目。
4. simple：最简单的模板，只包含一个 HTML 文件和一个 Vue 组件。
5. pwa：用于创建渐进式 Web 应用程序（Progressive Web App）的模板。

各个模板的目录

1. 默认模板
   Vue CLI 的默认模板是基于 webpack 的，文件目录结构如下：

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── webpack.config.js

2. PWA 模板
   Vue CLI 的 PWA 模板用于快速构建基于 Progressive Web App（PWA）的应用程序。文件目录结构如下：

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

注意，PWA 模板中使用了 vue.config.js 文件来自定义 Vue CLI 的配置选项，而不是使用 webpack.config.js。

3. TypeScript 模板
   Vue CLI 的 TypeScript 模板用于快速构建基于 TypeScript 的应用程序。文件目录结构如下：

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.ts
│   └── shims-tsx.d.ts
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

注意，TypeScript 模板中使用了 tsconfig.json 文件来配置 TypeScript 编译器的选项，而且 main.ts 文件被用作入口文件，替代了 main.js。

4. Browserify 模板
   Vue CLI 的 Browserify 模板用于快速构建基于 Browserify 的应用程序。文件目录结构如下：

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md

创建vue项目怎么配置Vue CLI TypeScript模板

1. 首先，确保已经安装了 Vue CLI。如果没有安装，请先安装 Vue CLI，具体请参考 Vue CLI 官方文档。
2. 在命令行中运行以下命令，创建一个新的 Vue 项目，并选择 TypeScript 模板：

vue create my-project --preset @vue/cli-preset-typescript

3. 在安装过程中，你会被要求选择一些配置选项，比如选择要使用的 CSS 预处理器、是否使用 Babel 等。根据自己的需要进行选择即可。
4. 安装完成后，在命令行中进入项目目录，然后运行以下命令启动项目

cd my-project
npm run serve

或者 使用npm install -g @vue/cli vue create my-project 创建项目，在创建项目的过程中，会提示选择一个预设（Preset）。选择 Manually select features，然后选择 TypeScript，最后选择其他需要的功能即可。

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? 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): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
-----------------------------------
选自 https://blog.51cto.com/u_15127642/2875211