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

目录
  • 一:项目搭建
  • 二: 目录结构
  • 三: Composition Api
  • 四: 基本使用:

最近在重构一个老项目,领导要求使用新的技术栈。好吧,是时候秀一波我新学的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 搭建项目总结(详细步骤)

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

  • vue3.0项目快速搭建的完整步骤记录

    目录 一.我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0 二.通过vue/cli3创建我们的第一个项目 Router CSS 预编译 ESLint 语法校验 运行项目 升级vue 三.vue3.0相比vue2.0改进和新特性 总结 如何搭建一个vue3.0基础项目? 一.我们要确保vue/cli版本在4.5.0以上,才能更好的支持3.0 //安装最新vue/cli yarn global add @vue/cli //或 npm install -g @vue/cli 用vu

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 手把手教你搭建vue3.0项目架构

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完全重写了一遍.虽然名字叫cli,其实两个库都是基于vue-cli创建的.做这个的目的是为了工作中快速启动项目,毕竟切片打包.less.axios.vuex.router.UI框架.基础文件目录.权限,这些都是基操,当然项目不同,还是要做些调整的.这两个项目的master分支都是最基础的东西,里面还包

  • 如何搭建一个完整的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(

  • vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

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

    最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选择我们需要的3.x 之后按照要求配置一下router,已经pack.json ... 然后n

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

    目录 一:项目搭建 二: 目录结构 三: Composition Api 四: 基本使用: 最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选

  • 基于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

  • 从零开始用webpack构建一个vue3.0项目工程的实现

    前言 入门级别教程,适用于初级工程师 移动端 单页面  Demo 正文 第一步 找一个你认为合适的磁盘.输入mkdir test, cd test , npm init -y. 第二步 安装依赖 webpack 系列依赖 webpack webpack-cli babel 系列依赖 @babel/core @babel/preset-env 移动兼容方案 amfe-flexible autoprefixer axios axios webpack loader babel-loader css-

  • ionic 3.0+ 项目搭建运行环境的教程

    本文介绍了基于ionic3.4.0的项目搭建,分享给大家,具体如下: 在写这篇文章的时候,ionic版本已经更新到3.4.0.手头上有一大堆ionic1.x版本的项目,也在这个基础上开发了许多第三方的插件.实在是按捺不住迭代重构的想法,终于开始了3.x的升级.文中的内容都是在实践的过程编写的,注意请不要着急升级版本. 环境迁移 先看下升级后最新的环境输出信息 全局升级了Cordova和Ionic的版本,分别是7.0.1和3.4.0.输出ionic info 打印出最新的环境配置信息.这里要特殊指

  • 配置一个vue3.0项目的完整步骤

    说起来有点丢人,我已经使用vue好久了,但是怎么从0开始配置一个vue项目,每次还是要百度.这次决定写个博客,加强下记忆,如果再记不住就直播自己的女朋友洗澡. 以下以新建一个图书管理项目为例.我使用vue3新建项目,对于创建一个项目来说,vue3真的比vue2简单很多. 1.初始化项目 1.1全局安装vue-cli 创建vue项目,首先要确保全局安装了vue命令行工具. 我这边使用yarn而不用npm,因为yarn要比npm好用的多,强烈推荐使用.如果大家对yarn不熟悉,我这边免费赠送我的ya

  • vue3.0+vant3.0快速搭建项目的实现

    目录 一.项目的搭建 二.vue3体验+vant引入 2020年09月18日,vue.js 3.0正式发布,去网上看了看关于3.0的教程都不够完整,但其实vuecli最新版已经支持了vue3.0项目的快速搭建,这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目. 一.项目的搭建 1.首先,nodejs的安装不用我多说了吧,nodejs官网地址. 2.既然vuecli最新版已经可以快速搭建3.0了,那怎么升级到最新版呢?vue-cli官网地址,不知道vue-cli版本

随机推荐