vue搭建项目步骤,vue3.0项目实战
本文主要介绍vue3.0项目的构建和使用过程，帮助您更好地理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
一：项目建设
二：目录结构
三：组合Api
四：基本用途：
最近，在重建一个旧项目时，领导要求使用新的技术堆栈。好了，是时候展示我的新vue3.0了。
不bb开始我的表演。(以下只是我个人的理解和使用习惯，仅供参考。)
一：项目搭建
1.你可以自己配置vite，但是为了节省时间，我会用脚手架直接搭建。(有兴趣可以学习vite。它仍然闻起来很香。)
2.项目生成：在iTerm: vue下创建myproject
然后根据自己的要求选择不同的配置。
选择我们需要的3.x。
之后根据需要配置路由器，pack.json就完成了。然后npm运行服务
好的.一个基本的3.0项目被构建并完成。(那不可能)
二： 目录结构
的原始目录结构如下：
为了便于数据管理，我们需要定制一些其他文件。下面是一个简单的演示结构：
Hooks用来定义一些通用组件，可以在多个组件中重用，也可以和vuex结合使用。
键入定义了您需要使用的一些ts类型。例如：
根据不同的组件拆分不同的类型，然后在index中导出。一些公共类型可以在索引中定义。
请求定义一些http请求。
Base.ts基本路径
Api.ts集合
Http.ts可以拦截axios请求并配置环境。(开发、产品)
整体配置大致是这样的。它集中了api和ts类型，更方便后期管理。
它还需要在组件内部进行拆分：
这是一个关于页面。一个文件夹分为。vue文件和一个内部钩子。的。vue文件是基本的演示结构。钩子根据不同的功能拆分不同的文件。例如，listDownHooks.ts文件是用于显示下拉菜单的方法的集合。也可以单独拆分一个样式文件，(因为觉得有点麻烦所以没做.)
这是目录的结构。首先在类型化中定义基本的数据类型，然后将它们引入到每个组件下的钩子中的方法中，然后在。vue文件。
三： Composition Api
Composition Api是一组基于函数的附加Api，可以灵活组合组件逻辑。最好和ts一起吃~ ~ ~
1.定义组件
从Composition Api解构而来，带ts。定义组件：
导出defaultdefineComponent({ })；
如果不用ts，也可以写导出默认{}。
2.设置
Composition Api的核心部分是vue3.0的亮点，取代了之前的beforeCreate和created生命周期。
您可以在设置中初始化一些响应数据。
Setup(props，ctx)接受两个参数，props和ctx (context)。
道具就是传统的亲子资料。不建议在设定中解构道具，会让道具反应迟钝。
可以在ctx中解构为slots，attrs，emit类似于2.0。
3.参考和反应
用于创建响应数据的方法。从vue解构=从“vue”导入{ref，reactive }；
使用参考：
从“vue”导入{ref，define component }；
导出默认定义组件({
setup() {
const number=ref(0)；
console.log(数字)；
返回{
数字
}
}
})
通过ref创建一个响应数据，控制台会看到。
这是一个参考响应数据。我们操作的时候通过number.value操作数据，然后返回结果。
声明基类型和引用类型有什么区别？
声明ref的基本类型是一个创建ref的响应对象。
声明一个ref引用类型也是一个创建ref的对象，但是内部是一个由reactive方法包装的响应式对象。
如果你的ref对象在一个反应式对象中被改变，你可以通过key，value方法直接得到它。
被动使用：
从“vue”导入{reactive，defineComponent，tore fs }；
导出默认定义组件({
setup() {
const obj=reactive({
菜单列表：[]作为数组
});
console.log(数字)；
返回{
.toRefs(obj)；
}
}
})
创建代理响应数据。通过toRefs返回数据。里面是这样的：
个人认为：一些基本类型可以用ref定义，对于一个整体的定义，可以用reactive。
其他：
其他常用的方法如：计算、观察等。在用法上类似于2.0。这里不多描述。
四： 基本使用：
以一个基本的新闻列表为例。
主要是检索挂载阶段的数据，翻页时刷新数据。
目录：
src-views-news-hook-newslisthook . ts(用于处理列表数据)
定义文件中的原始数据。
让dataSource=reactive({
list:[]asarraynewslist//I newslist是一种数据类型。
});
定义一个newsList()方法，该方法包含一个获取接口数据的getList方法。分页请求时触发一个方法，getList挂载在mounted中。然后返回数据和方法。代码如下：
/** * 1.列出请求数据*/导入API自./././request/API ；
从“vue”导入{reactive，on mounted }；
从导入{InewsList}./././打字；
导出函数newsList():对象{
设data source=reactive({ list:[]as arraynewslist })；
函数getList(obj: object): void {
api.newsList(obj)。然后(res={
data source . list=RES . data . data；})
};
函数onChange(e: any): void {
让start=e 10
const obj={start，num:10 }；
getList(obj)；
};
onMounted(()={
const startObj={start: 1，num:10 }；
getList(start obj)；
});
返回{
数据源，
获取列表，
待清扫房
}}
然后在src-views-News -News.vue文件中使用。
从导入{新闻列表}。/Hook/newslistHook ；
导出默认定义组件({
名称：“新闻”，
setup() {
const list=newsList()；
返回{
.list //list包含所有定义的数据和方法。
}
}})
控制台列表：
这样就可以在vue文件中直接渲染使用了。
总结一下：把需要的party和一些事件(click，mousedown，keyup.)在hook中执行，vue文件用于数据渲染。
项目中使用的是Antd的Vue框架，使用时最好按需加载。毕竟antd太大了。
从“ant-design-vue/es/menu/index”导入菜单
从 ant-design-vue/es/select/index 导入选择
createApp(应用程序)。使用(存储)。使用(路由器)。使用(菜单)。使用(选择)
好吧，就这样。新人试着写vue3.0，多指出不足。
以上就是vue3.0项目建设和使用过程的细节。更多关于vue3.0项目建设和使用的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。