【Vue】脚手架Cli2/3/4分析（含配置移除和构建旧脚手架问题解决）

原创 已于 2024-09-02 15:25:52 修改 · 831 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2020-09-22 14:16:46 首次发布
本文介绍了Vue CLI的基础知识，包括脚手架的作用，Vue CLI 2、3、4的目录解析，以及如何安装和配置。详细讲解了Vue CLI 2的文件结构和关系，CLI 3的升级变化，如基于webpack4，移除build和config目录，以及CLI 4的主要升级点。此外，还提供了在CLI 3上构建config/build配置文件的方法和同时使用CLI 2、3的策略。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

文章目录

简介：什么是脚手架

Vue cli脚手架官方文档

CLI

在我们开发大型项目的时候，那么需要并且必然使用CLI工具，我们需要考虑代码的目录结构、项目结构、部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那么无疑效率极低，所以我们需要通过脚手架工具来帮助我们完成这些事情。

vue cli

  • CLI是 Command-Line Interface,翻译为命令行界面，俗称脚手架
  • 使用vue-cli可以快速搭建Vue开发环境
  • 使用vue-cli可以快速搭建对应的webpack配置

如何安装

安装Node

1.官网下载

https://nodejs.org/zh-cn/download/

2.更改路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ib0HbOi-1600702293863)(FC864CF427B944318465CF86BC368E92)]

3.检查是否安装成功

cmd输入 # node -v

# node -v

出现此图则说明安装成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IUHEqcmP-1600702293866)(219721C1F7154714A87D8FD040A07498)]

安装后的本地目录设置

使用npm安装模块分为本地安装和全局安装。

本地安装：npm install express会安装到当前项目

全局安装：npm install express -g 会安装到指定的目录(node_global)

另外，如果没有设置全局目录node_global，那么全局安装的文件将会保存到：

C:\Users\hades\AppData\Roaming\npm(hases是自己设置的计算机名字)

所以，安装好node后，要设置一下node_global和node_cache(node缓存文件夹)

1.创建目录

在node安装目录创建node_global和node_cache文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdrNErpb-1600702293877)(0BAFA10A729E415B98AE10D6579F6E74)]

2.执行更改地址命令

npm config set prefix "D:\Program Files\nodejs\node_global"   

npm config set cache "D:\Program Files\nodejs\node_cache"

安装淘宝镜像加速器cnpm

尽量少用cnpm，可能导致不能使用
首先安装express

#使用NPM（Node.js包管理工具）安装依赖时速度特别慢，为了安装Express，执行命令后两个多小时都没安装成功，最后只能取消安装，在安装时可以手动指定从哪个镜像服务器获取资源，可以使用阿里巴巴在国内的镜像服务器，命令如下：

npm install -gd express --registry=http://registry.npm.taobao.org

#只需要使用–registry参数指定镜像服务器地址，为了避免每次安装都需要--registry参数，可以使用如下命令进行永久设置：

npm config set registry http://registry.npm.taobao.org

#查看全局安装的目录

npm root -g

然后安装淘宝镜像

下载淘宝镜像
npm install cnpm -g --registry=http://registry.npm.taobao.org
cnpm -v
cnpm install

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqPqTEct-1600702293878)(0D0F61FF12604FC690041C620B8E338A)]

安装cnpm后设置环境变量

原环境变量如下！！！:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QOZWLVjS-1600702293882)(818487134CB348D3B73AEC4F75AC1A11)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JooKKoDQ-1600702293884)(6FF4D931340C405682651D558AB6CD03)]

保持不变，然后在path中添加多一个cnpm的环境变量

你的cnpm.cmd所在的路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFJRvSeW-1600702293886)(984BD95A3CF84F2391C38D36A5A1A0FE)]

通过Node安装vue-cil

npm install @vue/cli -g

如果原来已经安装了vue-cli的话需要先卸载原来的安装

npm uninstall vue-cli -g

测试是否安装成功

vue -V

查看检测，vue cli3后支持ui界面

vue ui

Vue cli 2（vue-cli）

目录解析

在这里插入图片描述

文件相关解析

  • build文件夹【主要用来配置构建项目以及webpack打包文件配置】
  • config文件夹【定义webpack配置变量】
    • dev 开发配置
    • index 主要配置
    • prod 生产配置
  • node_modules 【node依赖】
  • static 【静态资源】
  • package.json文件【管理node包】
    • npm run dev
    • npm run build
    • npm run start
  • package-lock.json文件【node版本映射】

在这里插入图片描述

cli2脚手架文件解析

在这里插入图片描述

  1. index.html 单页面应用【连接main.js入口文件】

  • 本质上是一个单页面应用

  • ？ 为什么index.html是项目的入口以及为什么index.html加载后会继续加载main.js、App.vue、index.js，以及他们之间的关系是如何联系起来的呢，

这块的配置文件位于build文件夹下，包括webpack.dev.conf.js等，感兴趣的可以了解下
  • ？index.html内容

在body体中只有一个div标签，其id为app,这个id将会连接到src/main.js内容

  • <div id="app"></div> 默认引用了app.vue根组件
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  1. main.js 【入口文件=关联路由+公共组件】
  • ？main.js内容

在main.js中，新建了一个vue实例，并使用el：#app链接到index.html中的app，并使用template引入组件<app>和路由相关的内容（具体的涉及到vue的语法规则，如果不理解的先记下来吧，继续往后看，等了解vue的相关内容后，可能会更清晰）。也就是说通过main.js我们关联到App.vue组件

  • new Vue({……})
    • el：官方解释为实例提供挂载的元素。此处为index.html中的
    • router：为router:router,的简写，指向引入文件中的routes:[]
    • components：注册哪些组件，需在顶部引入文件
    • template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
  1. App.vue【根组件文件】
  • ？App.vue内容

App.vue中的内容，是一个标准的App.vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分，从template标签中可以看到，使用img标签加载了vue的图像，也就是我们使用npm run dev运行vue项目后看到的图像，那么图像下面的内容是从哪里渲染出来的呢？

我们注意到，<template>标签下，除了<img>标签外，还有<router-view>标签，<router-view>标签将会把路由相关内容渲染在这个地方接下来，我们看一下路由的内容有哪些，在哪里出现的。其实，这个文件位于src/router/index.js中，我们看一下index.js中的代码

  • <router-view>
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. index.js 【路由文件】

在index.js的代码中，建立了路由相关的内容，也就会渲染到app.vue下面的<router-view>中。在index.js中，将helloworld组件发布为路由，换句说，index.js在这里就是将helloword发布为路由，以在图片下面进行展示helloword内容，接下来我们再看看components/helloword中的内容

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

总结

vue = 单页面应用 = 入口文件 + 路由 + 组件

我们可以看到项目加载的过程是

index.tml【单页面应用，默认引用了app.vue根组件】->main.js【入口文件，引入相关资源文件】->app.vue【根组件文件组件嵌套】->index.js【路由文件】->helloworld.vue【具体组件】

这里只是对我们运行项目后，如何出现首页面做了简单的解释，对具体的实现没有进行分析。

http://localhost:8080/#/，首次项目启动的路径，访问的是index.html

在这里插入图片描述

项目安装时runtime-only 和 run time-compiler

在这里插入图片描述

  • runtime-compiler
    • 先在components里面注册
    • 放到template（模板html文件）里面
    • 执行流程：template ->ast抽象语法树->render->v dom 虚拟dom->UI 真实dom
  • runtime-only
    • 性能更高
    • 箭头函数
    • 执行流程：render->v dom 虚拟dom->UI 真实dom

Vue cli 3（@vue/cli）

vue-cli 3 与 2 版本区别：

  • 3 基于webpack4打造，2基于webpack3打造
  • 理念是：0配置
    • 移除了build和config目录
  • 提供 vue ui 可视化配置
  • 移除了static文件夹
  • 新增了 public文件夹，把index.html移到public中
  • main.js new Vue改造了挂载渲染（其实和2没有区别，只是底层多了一个判断）

在这里插入图片描述

目录解析

在这里插入图片描述

Vue cli 4

vue cli 4 官方英文升级文档

vue cli 4 主要升级点总结

1.“@vue/cli-plugin-babel”, “@vue/cli-plugin-eslint”, "@vue/cli-service"由 v3 的版本升级到了 v4

2.sass-loader由 v7 的版本升级到了 v8

3.core-js由 v2 的版本升级到了 v3

4.webpack-chain由 v4 的版本升级到了 v6

5.css-loader由 v1 的版本升级到了 v3

6.url-loader由 v1 的版本升级到了 v2

7.file-loader由 v3 的版本升级到了 v4

8.copy-webpack-plugin由 v4 的版本升级到了 v5

9.terser-webpack-plugin由 v1 的版本升级到了 v2

10.@vue/cli-plugin-pwa由 v3 的版本升级到了 v4

11.新增插件 vue add vuex vue add router

12.pug-plain已重命名为pug-plain-loader

13.默认目录结构已更改

src/store.js 改为 src/store/index.js

src/router.js 改为 src/router/index.js

14.由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json

但是现在建议使用它来 plugins: { ‘@vue/cli-plugin-router’: { historyMode: true } }

获得更好的一致性

15.api.hasPlugin(‘vue-router’)不再受支持，现在 api.hasPlugin(‘router’)

16.lintOnSave 选项的默认值（未指定时）从 true 更改为 default

17.废弃vue-cli-service test:e2e

18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

19.@vue/cli-plugin-unit-mocha 升级到Mocha 6

20.@vue/cli-plugin-unit-jest jest由 v23 升级到v24

21.@vue/cli-plugin-typescript 更好的ts支持

如何同时使用vue cli2和3

在这里插入图片描述
1.首先需要安装vue cli3在本地

2.全局安装桥架工具

npm install -g @vue/cli-init -g

3.使用命令创建vue cli2初始化项目（使用3直接vue ui / 命令构建即可）

# cli2初始化项目
vue init webpack my-project
# cli3初始化项目
vue create my-project

4.cd到目录，执行初始化命令并且根据提示安装

在这里插入图片描述

在这里插入图片描述
5.cli2脚手架文件目录（完成构建）

在这里插入图片描述

如何在cli3上构建config/build配置文件

方法一：创建vue.config.js（推荐）

在这里插入图片描述

# 这是一个固定写法，官方规定命名为vue.config.js
# module.exports 作用为把这里写的配置和隐藏目录的配置合并起来

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8066,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://47.100.47.3/',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    },
}

方法二：在隐藏的目录中修改（不推荐）

在这里插入图片描述

—end

脚手架、vue-cli与@vue/cli概念辨析
skysys的研究小屋
01-22 1646
脚手架 「为减少重复性工作而做的重复性工作」的工具 例子 你要写一个项目0，源语言为ES6，用了sass, 后端是node.你每次完成一部分功能，你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。 后来你知道了gulp, 然后你写了个gulp脚本，每次有代码改动，一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后，你又要写项目1，还是ES6、
脚手架vue-cli和@vue/cli的搭建及区别
热门推荐
qq_37635012的博客
04-14 1万+
vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架，首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装，node安装完之后，node自带的包管理工具npm也就安装好了，我们win系统直接开始在cmd窗口输入node -v查看node版本号，如下图能看到版本号说明node安装成功:...
vue-cli脚手架教程
最新发布
刻苦的樊同学
11-12 3075
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了，需要修改的文件在项目目录下的config文件夹里的index.js文件中。在projectname项目目录下执行 npm run build ，打包项目，打包完成之后，我们就可以像打开静态网页一样打开我们完成的项目。这样父组件的变量就传到了子组件，然后子组件使用如下方式接收，这样在子组件中就可以使用变量了，例如：{{username}}
linux安装 ”NTFS“ 文件系统
weixin_34413103的博客
01-31 259
安装NTFS-3G 1.1 系统环境 CentOS 5 （kernel 2.6.18-8.el5） 1.2 软件及支持库 NTFS-3G http://www.ntfs-3g.org FUSE http://fuse.sourceforge.net 1....
Vue实战之Vue CLI 脚手架
helloworld工程师的博客
02-22 943
Vue CLI 脚手架 14.1 什么是CLI 命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI） 14.2 什么是Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。 14.3 Vue CLI优势 通过 vue-cli
Vue-cli 脚手架升级 + Vue 构建项目
Bule_daze的博客
03-17 821
哈哈，我简直是个原始人 ????。 今天执行了一下 vue --version ，发现我的版本竟然还是 2.9.6，哈哈哈哈，太古老了8⃣️ 更新一下 ????： 先卸载掉之前的：npm uninstall vue-cli -g 然后安装新的：npm i @vue/cli -g vue --version 哈哈，成功晋级 v4.2.3 来试试看 ???? vue create vue-test #一条命令即可轻...
vue-cli2.x升级到vue-cli4.x，vue脚手架升级
仙途路漫漫其修远兮
05-07 1492
vue-cli2.x升级为vue-cli4.x荆棘之路记录方便以后重新走
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
总的来说，解决 Vue-cli3 项目在旧设备和浏览器上的兼容性问题，关键在于使用 Babel 进行代码转换，并通过 polyfill 提供那些不被支持的原生 JavaScript API。通过正确配置项目构建流程，我们可以确保项目能在更广泛...
vue-cli2和vue-cli3脚手架介绍和深入理解
weixin_45221036的博客
04-04 1181
一、vuecli的介绍和安装 1、介绍 CLI是Command-Line Interface（命令行界面）俗称脚手架 Vue CLI使用的前提 Node.js、webpack（npm install webpack -g全局安装） 2、安装vue脚手架（cli3） npm install -g @vue/cli -g就是全局安装（global） 注意：此时安装的是最新版本，如果需要想按照v...
Vue CLI脚手架
申小兮和林小兮的博客宝
04-14 1271
plugin介绍及使用，搭建本地服务，Vue CLI脚手架介绍及Vue CLI最新版本详细操作步骤，VueCLI2版本的项目创建步骤
Vue学习—— CLI脚手架
Elainerui的博客
10-17 228
Vue CLI脚手架
一个CLI命令行脚手架工具
大灰狼的小绵羊哥哥的博客
03-22 736
前言 开始本篇文章前，我们先来思考几个问题： 平时自己创建新项目的流程是怎么样的？ 团队为了落地规范化（git 提交规范、代码规范、文档规范等），做了哪些事情？ 我想大部分同学肯定都是这样回答的：现在社区都有开箱即用的脚手架，像vue-cli、create-react-app这种，我们直接用脚手架来创建项目就可以了啊。 上面这种方式也是我所在的团队最开始的基操，但是随着团队成员的快速增加和业务的飞速迭代，有很多问题逐渐暴露出来： 大部分业务场景是相似的，那么对于基础框架结构的诉求（
vue-cli脚手架
Leesure_优快云的博客
06-22 294
vue-cli 脚手架 在实际开发的大型项目中，需要Vue Cli脚手架，使用Vue.js开发大型应用时候需要考虑代码目录结构，项目结构部署，热加载，代码单元测试等，为了提高效率，需要脚手架来帮助完成这些事情 CLI Cli是command-Line Interface,翻译为命令行界面，俗称脚手架，Vue CLI 是一个官方发布的vue.js项目脚手架，使用vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置 Vue CLI 使用的前提-Node因此使用Vue CLI 是需要安装Node
【Vue笔记整理十二】Vue Cli（Vue脚手架）
小异常的博客
12-01 407
Vue 作为新一代的前端技术，已经在很大程度上改变了前端开发的思想，前端的发展也逐渐向后端靠拢。我在之前的几篇博客中都是以我们之前的前端开发思想来讲的（直接引入 JS 文件的方式），其实 Vue 并不是这样使用的，作为新一代的前端技术，它在写法和思想上已经完全颠覆了我们对前端的认知。
Vue CLI 3.x 脚手架
大家好，我是+V
08-20 306
Vue CLI 3.x 脚手架 什么是Vue-CLI Vue-CLI 是 VUE 官方提供，用来搭建项目脚手架的工具，他是vue.js标准的工具，他已经集成了，webpack，内置了好多常用的配置，使我们在使用 Vue 开发项目的时候更加标准化。 安装： npm install -g @vue/cli 使用命令来查看版本 vue --version 通过脚手架创建出来的项目结构 通过脚手架创建项目请看这里：https://blog.csdn.net/weixin_42776111/article/det
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值