vue3.0 项目搭建和使用流程

最近在重构一个老项目,领导要求使用新的技术栈。好吧,是时候秀一波我新学的vue3.0了。

不多bb,开始我的表演。。。(以下只是我自己个人的理解和使用习惯,仅供参考哦)

一:项目搭建

1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建。(有兴趣可以研究一下vite,还是很香的)

2. 项目生成:iTerm下: vue create myproject

之后根据自己的要求选择不同的配置

选择我们需要的3.x

之后按照要求配置一下router,已经pack.json 。。。 然后npm run serve

ok。一个基本的3.0项目搭建完成,结束。(那是不可能的)

二: 目录结构

原始的目录结构如下所示:

为了方便数据管理,我们需要自定义一些其他的文件。下面是一个简单的demo结构:

hooks用来定义一些公共组件的方法,可以在多个组件里面复用,也可以和vuex联用。

typing定义一些你需要使用的ts类型。比如:

根据不同的组件拆分不同的类型,然后统一在index中导出。index中可以定义一些公共的类型。

request定义一些http请求。

base.ts基本路径

api.ts合集api

http.ts 可以做一下axios请求拦截和配置一下环境。(development, product)

整体配置大致就是这样,把api,以及ts类型集中起来,更方便之后的管理。

在组件内部也需要拆分:

这是一个about页面。分为.vue文件和一个内部Hooks的文件夹。.vue文件是基本demo结构。hooks里面根据不同的功能拆分不同的文件。比如:listDownHooks.ts文件就是用来出来下拉菜单的方法集合。还可以单独拆分一个样式文件,(我觉得有点麻烦就没做..)

目录结构就是这样。先在typing定义基本的数据类型,然后再每个组件下的Hooks里面的方法中引入之后在.vue文件里面使用对应的方法。

三: Composition Api

Composition Api是一组基于功能的附加API,可以灵活地组合组件逻辑。配合ts食用更佳~~~

1. defineComponent

从Composition Api中解构出来,配合ts。 定义一个组件:

export default defineComponent({});

如果你不使用ts,也可以使用export default {} 的写法。

2. setup

Composition Api核心的部分,是vue3.0的亮点。替代之前beforeCreate和created生命周期。

可以在setup中初始化一些响应式数据。

setup(props, ctx) 接受两个参数,props和ctx(上下文).

props是传统的父传子数据。不建议在setup中解构props,这样会使props失去响应。

ctx中可以解构出,slots,attrs, emit,用法类同于2.0。

3. ref和reactive

用来创建响应式数据的方法。从vue中解构出来  =>    import {ref, reactive} from 'vue';

ref使用:

import {ref, defineComponent} from 'vue';
export default defineComponent({
 setup() {
  const number = ref(0);
  console.log(number);
  return {
   number
  }
 }
})

通过ref创建一个响应式数据,console看一下。

这是一个ref式响应数据,我们在操作的时候通过number.value来操作数据,然后把结果return回去。

ref 声明基本类型和引用类型的区别?

ref声明基本类型,是创建了一个ref的响应式对象

ref声明引用类型,也是创建了一个ref的对象,但是内部是用reactive方法包装的响应式对象

如果你的ref对象被更改在一个reactive里面,可以直接通过key,value方法获取

reactive使用:

import {reactive, defineComponent, toRefs} from 'vue';
export default defineComponent({
 setup() {
  const obj = reactive({
    menuList: [] as Array<T>
   });
  console.log(number);
  return {
    ...toRefs(obj);
  }
 }
})

创建一个proxy式的响应数据。通过toRefs将数据return回去。内部是这样的:

个人觉得:一些基本类型可以多使用ref定义,对于一个整体的定义,可以使用reactive。

其他:

其他的一些常用的方法比如:computed, watch,等其实用法和2.0差不多。这里不多描述。

四: 基本使用:

用一个基本的新闻列表为例。

主要就是在mounted阶段调取数据,在翻页的时候刷新数据。

目录:

src -> views -> News -> Hook ->newsListHook.ts (用来处理列表数据)

在文件中定义一下原始数据。

let dataSource = reactive({
 list: [] as Array<InewsList> // InewsList是数据类型
});

定义一个newsList() 方法,内部包含一个getList方法用来获取接口数据。一个方法分页请求时候触发,把getList在mounted挂载。之后将数据和方法return出去。代码如下:

/** * 1. 列表请求数据 */import api from '../../../request/api';
import {reactive, onMounted} from 'vue';
import {InewsList} from '../../../typing';
export function newsList(): object {
 let dataSource = reactive({list: [] as Array<InewsList>});
 function getList(obj: object): void {
  api.newsList(obj).then(res => {
   dataSource.list = res.data.data; })
 };
 function onChange(e: any): void {
  let start = e || 10;
  const obj = {start,num: 10};
  getList(obj);
 };
 onMounted(() => {
  const startObj = {start: 1, num: 10};
  getList(startObj);
 });
 return {
  dataSource,
  getList,
  onChange
}}

之后src -> views -> News ->News.vue文件中使用。

import {newsList} from './Hook/newslistHook';
export default defineComponent({
  name: 'news',
  setup() {
  const list = newsList();
  return {
   ...list // list中包含着所有定义的数据和方法。
  }
}})

console一下list:

这样就可以直接在vue文件中渲染使用了。

总结一下:把需要用的方还有一些事件(click, mousedown, keyup...)可以放在hook中执行,vue文件就是用来数据渲染。

项目中使用到了antd的Vue框架,大家在使用的时候最好按需加载。毕竟antd太大啦。

import Menu from 'ant-design-vue/es/menu/index'
import Select from 'ant-design-vue/es/select/index'
createApp(App).use(store).use(router).use(Menu).use(Select)

好啦,就到这里啦。新人尝试写vue3.0,不足地方多多指出哦。

以上就是vue3.0 项目搭建和使用流程的详细内容,更多关于vue3.0 项目搭建和使用的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3.0中友好使用antdv示例详解

    前言 随着我们vue3.0的出现,我们的ui组件库也有了一些变化,像我们的旧版的element-ui已经不能在vue3.0中使用了,如果要使用element的话需要使用最新版的element-plus,由于发现它并不太好用,因此我选择了Ant Design Vue. 如果我们以前经常使用antd的话,我们使用起来这个上手会非常方便. 在vue3.0中引入我们的antdv 1.首先使用我们的vue/cli创建vue3.0项目并使用less 2. 在vue3.0中使用的话我们需要安装 ant-des

  • 为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    导 读 vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它.本文将主要通过以下方面来分析为什么vue选择弃用 Object.defineProperty . Object.defineProperty 真的无法监测数组下标的变化吗? 分析vue2.x中对数组 Observe 部分源码 对比 Object.defineProperty 和 Proxy 一.无法监控到数组下标的变化? 在一些技术博客上看到过这样一种说法,认为 Object.

  • vue3.0 搭建项目总结(详细步骤)

    1.环境配置 项目中的不同开发环境有很多依赖配置,所以可以根据环境设置不同的配置,以免在不同环境经常修改文件 1 在根目录下创建 `.env.[环境]` 文件,可以在不同环境设置一些配置变量,如图 .env.dev 文件 2.eslint 配置 在package.json 文件里面有一个eslintConfig对象,可设置rules: 如图 3.配置svg 在vue.config.js 里面需在module.exports对象里面设置 chainWebpack: config => { conf

  • 详解vue3.0 diff算法的使用(超详细)

    前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇.尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等.小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享. 首先我们来思考一些大中厂面试中,很容易问到的问题: 1 什么时候用到diff算法,diff算法作用域在哪里? 2 diff算法是怎么运作的,到底有什么作用? 3 在v-f

  • 基于vue3.0.1beta搭建仿京东的电商H5项目

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! GitHub地址请访问:https://github.com/GitHubGanKai/vue3-jd-h5 项目介绍 vue-jd-h5是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1 + Vant 实现,主要包括首页.分类页面.我的页面.购物车等. 本地线下代码vue2.6在分支demo中,使用mockjs

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • 如何搭建一个完整的Vue3.0+ts的项目步骤

    相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本).所以Vue3.0的学习是我们必然的趋势,今天,主要分享一下Vue3.0的详细搭建过程,希望可以为初入Vue3的小伙伴有所帮助. 我们现在开始进入今天的主题啦~~ 一.安装 1. 安装nodejs 此处提供nodejs下载地址: https://nodejs.org/zh-cn/download/ 大家根据自己电脑的配置选择适配的 LTS(

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • vue3.0 的 Composition API 的使用示例

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

  • 初探Vue3.0 中的一大亮点Proxy的使用

    前言 不久前,也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 Vue3.0 Updates 的主题演讲,对 Vue3.0 的更新计划.方向进行了详细阐述,表示已经放弃使用了 Object.defineProperty,而选择了使用更快的原生 Proxy !! 这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制:无法监听 属性的添加和删除.数组索引和长度的变更,并可以支持 Map.Set.W

  • vue3.0中使用element的完整步骤

    前言: 在vue3.0中使用element框架,因为element是支持vue2.0的,他推出的支持vue3.0的版本叫 element-plus 官网入口:点我进入 一.个人遇到的问题与解决办法: 遇到的问题: 我直接用cnpm  i element-plus -S 装的版本,不知道为啥,一直报错 图1,版本型号 图2 ,我的代码中使用图3 解决办法: 我把package.json中的element-plus的版本更换成    下面这句话,解决了问题(是否为最新版本问题,还在求证中) "ele

  • vue3.0中使用postcss-pxtorem的具体方法

    postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位. 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用. 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件) module.

  • 详解vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

随机推荐