Vue CLI

最新推荐文章于 2024-08-23 14:49:37 发布

明媚呀

最新推荐文章于 2024-08-23 14:49:37 发布

阅读量346

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41796393/article/details/129534507

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue CLI 都有哪些模板

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

各个模板的目录

默认模板
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

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。

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。

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模板

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

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

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

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