vue脚手架最新版本号（vue30脚手架）

本篇文章给大家谈谈vue脚手架最新版本号，以及vue30脚手架对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue-cli脚手架安装及运行
• 2、antdesignvue哪个版本兼容vue3
• 3、vue 脚手架简单安装流程
• 4、vue 3.0 正式版来了
• 5、Vue脚手架目录详解

vue-cli脚手架安装及运行

Vue是：构建用户界面的渐进式框架，可以自底向上逐层应用（大概是这个意思？由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。）

（前期刚学时不建议直接安装vue-cli脚手架，可以直接通过script/script引入，如：script src=""/script 然后直接用就行了）

1.首先Windows+R 打开cmd；输入npm -v 和node -v 检测是否安装了npm和node.js，没安装先去安装node.js（npm是随node.js一起安装的包管理工具，就不用安装了）附上node.js安装地址：

2.然后还需要淘宝镜像安装cnpm和webpack支撑（有时候安装依赖特别慢 就会用到cnpm）

淘宝镜像安装cnpm命令：

安装之后 执行cnpm -v，如果出现相应的版本号就是安装成功

webpack安装命令：

安装之后 执行webpack -v，它会问你：

直接回车就可以，然后再执行webpack -v，如果出现相应的版本号就是安装成功

3.最后就是安装vue-cli脚手架了

vue-cli脚手架安装命令：

安装之后 执行 vue -V ，如果出现相应的版本号就是安装成功

4.用vue-cli创建一个基于webpack的新项目并运行

首先可以在桌面新建一个文件夹，如：Vue

然后执行cd Vue 进入文件夹，然后输入以下命令新建项目，回车

然后根据提示一路回车，这时文件夹下就会有很多相关文件了

最后用cnpm安装依赖：

最后的最后 就是运行项目啦 输入以下命令：

或者以下命令也可以：

如果成功的话，一般就是提醒你可以在浏览器地址栏输入以下地址就能正常访问了

至此，应该就可以正常访问一个新建的项目了，接下来的就是在新项目中通过组件、事件、指令等等丰富项目。

本文根据vue.js官方文档学习总结。附上官方文档：

antdesignvue哪个版本兼容vue3

Ant Design Vue从版本2.0开始独立于Ant Design React分支，目前的最新版本是2.2.4。Ant Design Vue目前还没有官方支持Vue 3的版本，但是开发团队已经在Github上发布了Ant Design Vue的beta版本（3.0.0-beta.5），该版本是Vue 3的兼容版本。beta版本还未正式发布，因此使用时需要注意。此外，开发人员仍在努力工作中，以确保正式版的Ant Design Vue与Vue 3的兼容性。

值得注意的是，Vue 3与Vue 2在许多方面都存在较大的差异，包括更新的组件API、Composition API、根实例API等等。如果您计划使用Vue 3和Ant Design Vue，建议先熟悉Vue 3的新特性和变化，确保组合Ant Design Vue与Vue 3所需的学习曲线。

总之，目前Ant Design Vue还没有官方支持Vue 3的正式版本，但是开发团队已经在开发Vue 3的兼容版本。您可以耐心等待官方版本发布，或者使用beta版本进行尝试。同时，建议先了解Vue 3的新特性和变化，确保更好的使用Ant Design Vue和Vue 3。

vue 脚手架简单安装流程

能够显示版本号，说明环境已经安装好了。

注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图：

按照提示，打开浏览器输入地址：

最终结果如下：

到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。

vue 3.0 正式版来了

Vuejs 于2020年9月19日凌晨发布了代号为One Piece的 3.0 版本。以下简称Vue3

跟着官网文档，我们一起来体验下新版的魅力。

Vue3官方文档地址：

首先是测试工具

谷歌插件（需要翻墙）：

火狐插件：

electron桌面应用插件：

出于原型制作或学习目的，您可以将最新版本与以下各项配合使用：

使用Vue构建大型应用程序时，建议使用NPM安装方法。它与 Webpack 或 Rollup 等模块 捆绑器 很好地配对。Vue还提供了用于创作 单一文件组件的 随附工具。

ue提供了一个 官方CLI 用于快速搭建单页应用。

对于Vue 3，您应该使用Vue CLI v4.5，该版本在上npm提供@vue/cli@next。要升级，您需要在@vue/cli全局范围内重新安装最新版本：

然后在Vue项目中运行

在 dist/ NPM软件包的目录中，您会找到许多不同的Vue.js版本。

全局安装脚手架

查看脚手架版本是否在4.5以上（含4.5）

创建项目

此时终端显示如下图

选择第二项 Vue 3 Preview ，等待安装完成。

到此，恭喜你迈入了 Vue 3.0的时代！

Vue脚手架目录详解

build：webpack配置文件

config：webpack配置文件

node_modules：安装的依赖包

src：所有的组件都写在里面

static：所有第三方的静态资源存放目录

.babelrc：babel的一些配置（比如将es6编译成es5的一些配置）

.editorconfig：编辑器的一些配置（包括编码格式，缩进风格，换行格式）

.gitignore：配置Git仓库忽略的一些文件（不会上传）

.postcssrc.js 配置postcss的文件（主要是css样式兼容性，自动加前缀（autoprefixer））

index.html：入口html文件。

package.json: 项目的一些配置信息（项目的一些具体信息）

package-lock.json就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

autoprefixer：是用于给css3属性自动加属性前缀的

babel系列都是处理语法的

chalk：适用于格式化输出命令行信息的，比如run dev以后的start...

copy-webpack-plugin：在webpack中拷贝文件和文件夹

extract-text-webpack-plugin：为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象

file-loader：操作文件

friendly-errors-webpack-plugin：能够更好在终端看到webapck运行的警告和错误

html-webpack-plugin ：插件的基本作用就是生成html文件

node-notifier：来发送桌面消息,包括应用状态改变以及错误信息

optimize-css-assets-webpack-plugin：压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)

ora：命令行里自动运行的信息提示

portfinder：可以帮你找出正在运行的进程打开了哪些端口

rimraf：跑shell命令 rm-rf 的工具

semver：是用来对特定的版本号做判断的(check-version.js)中

shelljs：selljs是在node里跑shell命令的工具，比如‘rm -rf’在(check-version.js)中，属于Unix命令

uglifyjs-webpack-plugin：压缩js

webpack：打包工具

webpack-bundle-analyzer：打包优化工具，可得到一个可视化模块大小界面

webpack-dev-server：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率

webpack-merge：合并

关于vue脚手架最新版本号和vue30脚手架的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。