Vue CLI
accttodo 12/31/2024 前端开发CSS
目录
参考：
# Vue CLI
Vue CLI（Vue Command Line Interface），是一个用于快速搭建项目的工具，用于基于Vue.js进行快速开发。
- 提供了标准化的项目结构**，帮助开发者快速搭建项目框架；**
- 支持插件体系**，允许在项目中灵活添加功能；**
- 简化了
Vue.js开发的配置和构建过程，集成了开发环境，简化了开发过程。
具体提供的一系列功能包括：
- 项目脚手架：
Vue CLI提供了一个强大的项目脚手架工具，帮助开发者快速创建Vue.js项目，自动生成项目的基本结构和配置文件。 - 插件体系：通过插件体系，开发者可以轻松扩展项目功能。
Vue CLI内置了一些常用的插件，如Vue Router、Vuex等，并支持社区插件。 - 零配置开发：
Vue CLI默认提供了一套优化过的配置，开发者无需手动配置Webpack等工具，大大简化了开发过程。 - 单文件组件支持：
Vue CLI原生支持Vue单文件组件（SFC），开发者可以在一个文件中编写模板、脚本和样式。 - 开发服务器：内置了一个开发服务器，支持热模块替换（
HMR），提高了开发效率。 - 环境配置：支持多环境配置，可以根据不同的环境（开发、测试、生产）自动应用不同的配置。
- 脚本命令：提供了一组常用的脚本命令，如启动开发服务器、打包项目、运行测试等。
Vue CLI重要的组件：
CLI：@vue/cli，全局安装的npm包，提供了终端里的vue命令（如：vue create、vue serve、vue ui等命令）CLI 服务：@vue/cli-service，是一个开发环境依赖。构建于webpack和webpack-dev-server 之上（提供 如：serve、build和inspect命令）CLI 插件：给Vue项目提供可选功能的npm包 （如：Babel/TypeScript转译、ESLint集成、unit和e2e测试等）
# vue-cli
- vue-cli2只能利用
vue init webpack app命令初始化vue2.x的项目。 - vue-cli3至vue-cli4.5之间,可以利用
vue create app初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli4.5以上对应的才是vue3。 - vue-cli4.5以上，可以利用
vue create app初始化vue2.x或者vue3.x的项目，两者都可以在初始化时，自行选择。
# 一、vue-cli命令
# 1. vue-cli安装
- vue-cli2及以下版本:
npm install vue-cli -g
1
- vue-cli3/cli4及以上版本:
npm install -g @vue/cli
1
# 2. 创建新项目
- vue-cli2创建项目:
vue init webpack app
1
- vue-cli3/cli4创建项目:
vue create app
1
或通过视图创建项目：vue ui
# 3. 启动项目
- vue-cli2启动项目:
npm run dev
1
- vue-cli3/cli4启动项目:
npm run serve
1
# 二、项目结构
# 1. vue-cli2项目结构
|-- 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 // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
推荐阅读：vue-cli项目结构详解 (opens new window)
# 2. vue-cli3/cli4及以上项目结构
vue-cli3/cli4中移除了配置文件目录：config 和 build 文件夹，移除了 static 静态文件夹，新增了 public 文件夹，将 index.html 移动到 public 中。
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- public // 静态文件，比如一些图片，json数据等
| |-- favicon.ico // 图标文件
| |-- index.html // 入口页面
|-- vue.config.js // 是一个可选的配置文件，包含了大部分的vue项目配置
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- package.json // 项目基本信息,包依赖信息等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 三、设置环境变量
# 1. vue-cli2多环境
推荐阅读：vue-cli如何添加多种环境变量 (opens new window)
# 2. vue-cli3多环境
推荐阅读：vue-cli如何添加多种环境变量 (opens new window)
补充：
在 .env.[mode] 模式文件中，三个环境变量及其含义：
NODE_ENV（对应当前模式的名称）VUE_APP_RUNTIME_ENV（对应当前环境的名称）VUE_APP_BASE_URL（当前环境向后台发请求的baseurl）
使用环境变量：
- 只有以
VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌入到客户端侧的包中。 - 在js或vue文件中
process.env.{环境变量名}，比如VUE_APP_BASE_URL，使用process.env.VUE_APP_BASE_URL即可获取环境变量的值。 - 在html文件中使用环境变量，采用模板引用指令
<%= process.env.process.env.{环境变量名} %>，比如
<script src="xxx.com" app_id="<%= process.env.process.env.MY_APP_ID %>"/>
1
# 3. vue-cli4多环境
vue-cli4 和 vue-cli3在环境变量设置和使用上差别不大。推荐阅读：vue cli4-环境变量和模式 (opens new window)