创建Vue项目的多种方式

本文最后更新于：8 个月前

对比Vite、@vue/cli、vue-cli三种创建Vue项目方式的异同，包括：使用的命令、创建的项目结构、环境变量的配置……

创建Vue项目的多种方式

项目 \ 方式 create-vue @vue/cli vue-cli
介绍 Vue 官方的项目脚手架工具（基于Vite） 第二代官方项目脚手架
cli版本 >= 3（基于Webpack）		 第一代官方项目脚手架
cli版本 < 3（基于Webpack）
与Vue版本的关系 Vue3、Vue2都可以创建 @vue/cli@3 ~ 4.5，只能创建vue2项目
@vue/cli@4.5以上，可以创建vue2和3的项目		 只能创建vue2的项目
最新版本 v3.7.0 @vue/cli@5.0.8 vue-cli@2.9.6
npm依赖 项目创建后手动安装 项目创建过程自动安装
文档链接 快速上手 Vue.js (vuejs.org) 创建一个项目 Vue CLI (vuejs.org) Introduction · GitBook (vuejs-templates.github.io)

注：@vue/cli 与 vue-cli 之间是冲突的，二者只能同时存在一个。

Vue CLI 现已处于维护模式！现在官方推荐使用 create-vue 来创建基于 Vite 的新项目





一、命令

1. 安装

  • create-vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    npm init vue@latest 	# 这一指令将会安装并执行 create-vue

    # 等价于
    npx create-vue@latest

    # 等价于
    npm install create-vue@latest -g
    create-vue		# 这个过程中，执行create-vue模块的bin，执行它的创建逻辑，如果对过程细节感兴趣，可以查看create-vue源码
    npm uninstall create-vue -g

  • @vue/cli

    1
    npm install -g @vue/cli

  • vue-cli

    1
    npm install vue-cli -g

注意：@vue/cli 和 vue-cli 是互斥的，两者只能安装其中一个。



2. 新建项目

  • create-vue

    1
    npm init vue@latest 	# 安装和新建项目，共用一条命令
    1
    npm init vue@2			# 创建Vue2项目

  • @vue/cli

    1
    2
    vue create project-name		# 方式一：使用命令行进行项目配置
    vue ui					   # 方式二：使用ui界面进行项目配置

  • vue-cli

    1
    vue init webpack project-name



3. 启动项目

  • create-vue

    1
    npm run dev

  • @vue/cli

    1
    npm run serve

  • vue-cli

    1
    npm run dev

注意：以上只是初始的默认命令，这个命令是可以修改的





二、项目配置

1. create-vue

输入npm init vue@latest之后，会出现如下命令行界面，用于配置项目

image-20230615163028254

你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。如果不确定是否要开启某个功能，你可以直接按下回车键选择 No



2. @vue/cli

输入vue create project-name命令之后，会出现：

image-20230615232651066

@vue/cli自带一些默认的 preset，如果想自定义，选择第三项

image-20230615164240814

配置项包括如下 6 项，最后一项提示是否将该设置保存为 自定义的preset

image-20230615164956931

创建过程中，自动安装了npm依赖项（需要等待一段时间）

image-20230615164521497



3. vue-cli

目前使用 vue-cli 似乎已经无法创建项目
image-20230615233925495





三、项目结构

1. create-vue

1
2
3
4
5
6
7
8
9
10
11
12
13
├── index.html
├── package.json		// 项目基本信息,包依赖信息等
├── public
|  └── favicon.ico
├── README.md
├── src
|  ├── App.vue			// 页面入口文件
|  ├── assets			// 静态文件目录
|  ├── components
|  └── main.js			// 程序入口文件，加载各种公共组件
├── vite.config.js		// Vite配置文件
└── .vscode
	└── extensions.json	// vscode的团队共享配置

补充：

关于.vscode/extensions.json文件更多的细节，请查看： 团队一键安装项目推荐的vscode插件(使用extensions.json)



2. @vue/cli

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── babel.config.js		// babel的控制文件，用于babel进行转化语法，一般不需要我们写内容
├── jsconfig.json		// 指定了根文件以及 JavaScript 语言服务 提供的功能选项
├── node_modules
├── package-lock.json
├── package.json		
├── public
|  ├── index.html		// 入口页面
|  └── favicon.ico		// 标签页图标
├── README.md
├── src	// 源码目录	
|  ├── App.vue			// 页面入口文件
|  ├── assets
|  ├── components
|  └── main.js			// 程序入口文件，加载各种公共组件
├── vue.config.js		// 是一个可选的配置文件，包含了大部分的vue项目配置
└── .eslintrc.js		// ESLint配置文件

补充：



3. vue-cli

我自己没有成功使用 vue-cli 创建到项目，以下内容是引用自：彻底搞懂vue-cli各版本和vue2和vue3之间的关系！ - 掘金 (juejin.cn)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|-- build	// 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config	// 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目配置文件，build目录下有不少文件引用了它
|   |-- prod.env.js                  // 生产环境变量
|-- src		// 源码目录
|   |-- components                   
|   |-- router                       
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // babel编译参数，ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                      
|-- .postcsssrc                      // postcss配置文件
|-- README.md                       
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

针对build目录下几个文件再具体解读，参考文章：vue-cli基本使用（详细代码）

文件 作用
webpack.base.conf.js 1 配置webpack编译入口
2 配置webpack输出路径和命名规则
3 配置模块resolve规则
4 配置不同类型模块的处理规则
webpack.dev.conf.js 1 将hot-reload相关的代码添加到entry chunks
2 合并基础的webpack配置
3 使用styleLoaders
4 配置Source Maps
5 配置webpack插件
utils.js 1 配置静态资源路径
2 生成cssLoaders用于加载.vue文件中的样式
3 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
vue-loader.conf.js 配置了css加载器以及编译css之后自动添加前缀
build.js 1 loading动画
2 删除创建目标文件夹
3 webpack编译
4 输出信息
webpack.prod.conf.js 合并基础的webpack配置
2 使用styleLoaders
3 配置webpack的输出
4 配置webpack插件
5 gzip模式下的webpack插件配置
6 webpack-bundle分析
check-versions.js 检查npm，node.js版本





四、模式 & 环境变量

1. create-vue

Vite 构建的项目默认只有development和production两种模式。可以自定义更多模式。

内置的环境变量：

  • import.meta.env.MODE（String，当前所处的模式）
  • import.meta.env.BASE_URL（String，部署应用时的基本 URL。他由base 配置项决定）
  • import.meta.env.PROD/DEV/SSR（Boolean，当前是否运行在生产环境 / 开发环境 / server）

配置文件：.env.development和.env.production（放在项目根目录下）

1
2
3
4
.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

如何引用环境变量：

  • 请注意：在配置文件中，只有以VITE_前缀开头的环境变量才能在代码中使用！
  • 在项目JS代码中，通过import.meta.env.xxx使用当前模式下的环境变量
  • 在HTML模板中，可以通过%xxx%来使用环境变量。示例如下：
1
2
# .env.development
VITE_APP_TITLE=presentation-demo
1
2
// JS代码中
console.log(import.meta.env.VITE_APP_TITLE)
1
2
3
4
<!-- html模板中 -->
<h1>
    Welcome to %VITE__APP_TITLE%
</h1>

更多信息：环境变量和模式 | Vite 官方中文文档 (vitejs.dev)



2. @vue/cli

Vue CLI 创建的项目默认有三种NODE_ENV（模式）：development、test、production

配置文件：放在项目根目录下，用来指定环境变量

1
2
3
4
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略，保存一些不能公开的环境变量，例如密钥等
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，这是为了防止意外泄露隐私信息！

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务！

如何使用环境变量：

1
2
# .env.production
VUE_APP_TITLE=Vue CLI demo
1
2
// 项目JS代码中
console.log(process.env.VUE_APP_TITLE)

内置的环境变量：（不必自定义，始终可以使用）

  • NODE_ENV：String类型，会是 "development"、"production" 或 "test" 中的一个
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径

更多信息：模式和环境变量 | Vue CLI (vuejs.org)



3. vue-cli

配置文件：/config/dev.env.js和/config/prod.env.js

如何使用环境变量：

1
2
3
4
5
6
// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  DEBUG_MODE: false,
  API_TITLE: '"Vue CLI demo"' // 注意：如果值是String类型，需要用'""'双重引号包裹
}
1
2
// 项目JS代码中
console.log(process.env.API_TITLE)

更多信息：Environment Variables · GitBook (vuejs-templates.github.io)

vue-cli的环境变量配置感觉倾向于原始的webpack配置，这里采用key:value键值对的方式定义环境变量与前两者不同！





参考链接

快速上手 | Vue.js (vuejs.org)

创建一个项目 | Vue CLI (vuejs.org)

彻底搞懂vue-cli各版本和vue2和vue3之间的关系！ - 掘金 (juejin.cn)

jsconfig.json 中文文档 - 掘金 (juejin.cn)

团队一键安装项目推荐的vscode插件(使用extensions.json)

环境变量和模式 | Vite 官方中文文档 (vitejs.dev)

Introduction · GitBook (vuejs-templates.github.io)

vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project (github.com)

Vue
创建Vue项目的多种方式
http://timegogo.top/2023/06/15/Vue/创建Vue项目的多种方式/
作者
丘智聪
发布于
2023年6月15日
更新于
2023年7月16日
许可协议