vue-cli3和vue-cli2的区别是什么

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

vue-cli3和vue-cli2的区别是什么

区别:1、“vue-cli3”是基于webpack4打造的,而“vue-cli2”是基于webpack3打造的;2、“vue-cli3”移除了static文件夹,新增public文件夹,并且将“index.html”移动到了public中。

本文操作环境: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 文档

启动项目以及打包项目

# 启动项目

npm run serve
登录后复制

# 打包项目

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"  }}
登录后复制

【相关推荐:《vue.js教程》】

以上就是vue-cli3和vue-cli2的区别是什么的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:javascript能增加标签吗
下一篇:javascript学完学什么

发表评论

关闭广告
关闭广告