搭建vue项目流程,vue3.0项目实战
本文主要介绍vue3.0项目快速建设的相关信息。本文通过图片、文字、示例代码非常详细，对大家学习或使用vue3.0有一定的参考价值，有需要的朋友可以参考一下。
:
目录
1.我们需要确保vue/cli版本在4.5.0以上，这样才能更好地支持3.0 2。通过vue/cli3创建我们的第一个项目。RouterCSS预编译ESLint语法检查并运行项目升级vue 3。vue3.0与vue2.0相比有所改进，并总结了新功能。如何搭建一个vue3.0的基础项目？
一、我们要确保vue/cli版本在4.5.0以上，才能更好的支持3.0
//安装最新的vue/cli
yarn全局添加@vue/cli
//或者
npm安装-g @vue/cli
使用vue -V检查安装的版本号，并验证所有版本都已成功安装。
二、通过vue/cli3创建我们的第一个项目
创建我的项目
？请选择一个预设：(使用箭头键)
Default (babel，eslint) //默认选项
手动选择特征//手动选择特征
显然，以上两个选项都是默认选项。在第一步中，我们选择手动定制选项。
？请选择预设：手动选择功能
？检查项目所需的功能：(按空格键选择，按a键切换全部，按I键反转选择)
()巴别塔//代码编译
( )打字稿//ts
()渐进式web应用(PWA)支持//支持渐进式Web应用
()路由器//vue路由
()Vuex //状态管理模式
()CSS预处理//css预处理
()Linter/Formatter //代码样式和格式验证
()单元测试//单元测试
()E2E测试//端到端测试
在这一步，我们根据项目的需要选择一些我们需要的配置。选择所有A的配置，并且只选择空格。您可以在我们需要的配置项中点击空格，选择后按回车键确认。
Router
是否使用历史模式进行路由，根据项目要求选择。
CSS 预编译
这一步我选择node-sass预处理类型，根据自己的项目需求选择css预编译类型。
ESLint 语法校验
？选择一个linter/formatter配置：(使用箭头键)
仅带错误预防的ESLINT仅用于错误警告
EST Airbnb配置//松散模式
ESLint标准配置//正常模式
estpretier//严格模式
TSLint(已弃用)//TypeScript格式验证工具
这一步也可以根据项目要求选择。
？拾取其他lint特征：(按空格键选择，按a键切换全部，按I键反转选择)
(*)保存时Lint保存时检测
()提交时Lint和fix//提交时fix和detect
选择检查模式。我选择在保存时检查。我也建议你在保存的时候检查一下。也可以及时修改一些语法提示，更方便进行语法调整。
？你更喜欢把Babel，ESLint等的配置放在哪里？(使用箭头键)
专用配置文件//存储在专用配置文件中。
存储在package.json中的In.json//is
选择Babel、ESLint和其他定制配置的存储位置。我建议你选择这里的第一个。
是否要保存当前选定的配置项目？如果当前配置是常用配置，建议选择Y保存当前配置项。
运行项目
到这个时候，我们的项目已经立项了。根据提示，让我们运行项目。
光盘可能-项目
纱线服务
升级vue
项目已经开始了，这里我们来敲黑板。如果现在直接用3.0的语法去开发，会有问题。
模板
div class=home
{{msg}}
/div
/模板
脚本
从“vue”导入{ toRefs，reactive }
导出默认值{
姓名：家，
设置：()={
恒定状态=反应({
味精：“你好，世界”
})
返回{
.toRefs(州)
}
}
}
/脚本
当我们直接渲染msg页面时，总会报错msg变量没有初始化。
我们这里不着急。我们来看看package.json，检查一下vue的版本。为什么不支持3.0的语法？结果，问题真的就在这里。
果然还是2.xx的版本号，还是升级版本吧。
vue添加vue-下一个
升级后，我们来看看package.json果然，是3.0.0版-beta.1
好了，现在我们在纱线服务中运行我们的项目。
果然，现实总是打脸，但还是不跑。我们根据报错去看看min.js吧。
导入{
createApp
}来自“vue”
从导入应用程序。/App.vue
“导入”。/registerServiceWorker
从导入路由器。/路由器
从导入存储。/商店
createApp(应用程序)。使用(路由器)。使用(存储)。挂载(#app)
我们做了一些调整，不出所料，我们的项目一直运行正常！我们定义的msg字符串也呈现在页面上。
此时，我们运行了我们的第一个vue3项目。
三、vue3.0相比vue2.0改进和新特性
1.与vue2.0相比，性能有了明显提升；(据作者介绍，性能上有30%-300%的提升)
2.与vue2.0相比，包装体积明显减小；用摇树支架夹住没用的模块，只封装需要的，大大减小了封装体积；
3.暴露自定义渲染api，增加可扩展性；
4.底层完全用typescript重写，可以很好的支持TS；
5.新特性：api( composition-api是我们能够以一种侵入性更小、更灵活的方式组合组件的逻辑；
总结
关于vue3.0项目快速建设的这篇文章到此为止。更多关于vue3.0项目快速建设的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。