vue-cli3和vue-cli2的区别是什么_惠州计算机Web前端培训学校

本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。

vue-cli3和vue-cli2的区别是什么
vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下

vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁（此处后续可以详细介绍）

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

vue-cli 3 的设计原则是0配置，移除的配置文件根目录下的 build 和config等目录

移除了static文件夹，新增public文件夹，并且index.html 移动到了public中

Vue-cli3 创建的项目的目录结构
vue_project

-- node_modules # 安装的库依赖

-- public # 相当于vue-cli2中的static，打包后原封不动的放在dist中

-- src # 源代码

-- .browserslistrc # 配置浏览器相关的东西

-- .gitignore # 配置git相关的东西，可以配置忽略一些文件

-- .babel.config.js # 配置 babel

-- package.json

-- package-lock.json # 显示的真实的安装版本(package.json中可能有~或者 ^ 后面加版本号，因此可能会安装不同版本的依赖)

-- readme.md # markdown 文档

启动项目以及打包项目
# 启动项目

1

npm run serve

# 打包项目

1

npm run build

注：这些命令都是在 package.json 的 script 中配置的


{

  "name": "vue3test",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    # 运行项目

    "serve": "vue-cli-service serve",

    # 打包项目

    "build": "vue-cli-service build"

  },

  # 运行依赖

  "dependencies": {

    "core-js": "^3.6.5",

    "vue": "^2.6.11"

  },

# 开发依赖

  "devDependencies": {

    "@vue/cli-plugin-babel": "^4.4.0",

    "@vue/cli-service": "^4.4.0",

    "vue-template-compiler": "^2.6.11"

  }

}

点击咨询直接了解更多相关资料，我在惠州北大青鸟新方舟等你。

本文内容转载自网络，版权归原作者所有，如有侵权请联系我们进行删除。

标签：惠州计算机软件培训惠州计算件软件开发惠州计算机软件基础惠州计算机Web前端软件开发惠州Web前端培训学校惠州Web前端培训Web前端基础教程Web前端是什么Web前端教程Web前端入门