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版本的执行命令

vue --version 或 vue -V

特别注意:
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

已经安装vue-cli的老板们执行命令:

npm update -g @vue/cli

未安装vue-cli 执行命令:

npm install -g @vue/cli

这里还是推荐大家去官网看文档,官网对安装更新查看版本这块已经很详细了。

安装完最新版vuecli后,执行命令:

vue create hello-world(这是你自己的项目名称)

可以看到有以下选项:(第二个vue3-test无视即可)

这里可以看到已经有vue 3 项目的选项了 ,然后选择最后一项Manually select features(手动选择)

第一个选项是选择vue的版本,一定要选,其他的路由,vuex等根据自己需求进行选择。

当选择第一项后 就会提示选择vue的版本,这里选第二个

这里是是否路由使用history模式,需要后端配合,我这里不选择。

这块根据自己需求爱好选择css语言等配置

根据自己需求创建完项目后cd 项目名 ,同样npm run serve 启动项目吧!

二、vue3体验+vant引入

vant的引入:

首先进入vant的官网:vant官网地址,不知道心细的老板们发没发现版本号处有了新的版本

没错,这就是为vue3量身定制了vant3,切换版本到3,然后阅读文档

这里推荐按需引入:

配置好以后最好重启一下项目,避免配置不生效。
这里随便找个button按钮

main.js中已经更新了vue3.0创建vue实例及挂载的示例 ,这里不再是使用new Vue 而是使用createApp:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './utils/http';//这里是我自己封装的axios
import { Button } from 'vant';

const app = createApp
//vue3.0不再可以像之前一样可以将公共方法属性等挂载到vue的原型对象上
//这里可以将公共方法属性写在第二个参数中,参数是一个对象
//组件的注册通过.use链式调用
app(App, { http }).use(Button).use(store).use(router).mount('#app')

Home.vue中清空不需要的示例
这里只讲述我认为使用最方便的示例:

<template>
  <div class="home">
    {{ num }}----{{activeNum}}----{{refData}}
    <!-- vant 组件使用 -->
    <van-button size="large" type="primary" @click="changeNum">changeNum</van-button>

    <van-button type="success" @click="routerPush">路由跳转</van-button>
  </div>
</template>

<script>
//需要哪些模块按需引入
import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
export default {
  name: "Home",
  // 同vue2.0 接受父组件传值  及main.js 中传的值
  props: ["http"],
  // 必须写入setup里
  setup(props, context) {
    //这里的ctx  类似于vue2的this
    const { ctx } = getCurrentInstance();
    //路由 this.$router
    const router = ctx.$router;
    //main.js传入的封装axios
    const http = ctx.http;
     // 个人还是不推荐这样写  因为每次新建一个响应式数据就要ref包裹一下很麻烦
    const refData = ref('1212')//ref包裹 变为响应式对象
    // 个人觉着还是这样写舒服一点 类似于vue2中的data
    const state = reactive({//函数接收一个普通对象,返回一个响应式的数据对象
      num: 0,
    });
    //计算属性 个人喜欢写在对象中 因为看得更清晰一下 防止计算属性方法等混在一起不好区分
    const computedData = {
      // 计算属性写法 别忘记引入 computed
      activeNum : computed(()=>state.num*2)
    }
    //方法 个人喜欢写在对象中 因为看得更清晰一下 防止计算属性方法等混在一起不好区分
    const methods = {
      changeNum: () => {
        state.num++;
        // ref包裹的数据 必须用.value获取
        refData.value++
      },
      routerPush() {
        //路由跳转
        router.push({
          name: "test",
        });
      },
      //网络请求
      async getUserInfo() {
        try {
          let { data } = await http.get("http://localhost:3000/xiaochengxu/");
          console.log(data);
        } catch (error) {
          console.log(error);
        }
      },
    };
    // 同vue2 的 mounted vue 3 移除了 boforcreate和created两个生命周期  setup即为这两个生命周期之间的新生命周期
    onMounted(() => {
      methods.getUserInfo();
    });
    // watch的使用
    watch(()=>state.num,value=>{
      console.log('num改变',value)
    })
    //必须返回 模板中才能使用
    return {
      ...toRefs(state),// 将响应式的对象变为普通对象 使用时不需要state.num 直接num即可使用
      ...methods,// 解构赋值
      ...computedData,
      refData
    };
  },
};
</script>

这里如果对torefs ,ref,isref,reactive等等不知道用法的建议去看这篇,介绍的也很详细,我这里只是用的自己认为较为方便的写法。

到此这篇关于vue3.0+vant3.0快速搭建项目的实现的文章就介绍到这了,更多相关vue3.0+vant3.0 搭建项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • mpvue+vant app搭建微信小程序的方法步骤

    mpvue使用 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用 yarn add vant # 将node_modules下的vant-weapp下的dist目录复制到s

  • 详解如何搭建mpvue框架搭配vant组件库的小程序项目

    1. vant 介绍 ### 扫码体验 Vant - 轻量.可靠的移动端 Vue 小程序 组件库.由 有赞 公司开发与维护.提供了一系列美观.优质的移动端组件.vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --product

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • 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版本

  • 使用vue-cli webpack 快速搭建项目的代码

    一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于webpack模板的项目 vue init webpack [demoname] ? Project name (xxx) ? Project name xxxx ? Project description (A Vue.js project) ? Project description A Vue.js

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • vue-cli4.5.x快速搭建项目

    一.安装vue-cli npm i @vue/cli -g 二.创建项目 vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可; 1.生成项目文件; 终端输入: vue create projectname 2.选择生成配置方式 此处选择最下面一项进行手动配置 (你要是喜欢用eslint就直接选vue3那项就好) 3.插件选择 选择你需要的插件,上下箭头移动,空格切换选取状态 选错或漏选?没事,构建完毕后你依然可以通过Vue

  • 基于Vue-cli快速搭建项目的完整步骤

    前言 vue-cli 是一个官方发布 vue.js 项目脚手架,Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 下面话不多说了,来一起看看详细的介绍吧 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue和vue-cli 1.nodejs和npm安装方法详见:https://www.jb51.net/article/90518.htm 2.npm install -g vue 3.npm in

  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 正式版于 8月10号发布,但是3.0 与 2.0 版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友 1. 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后,有以下两种创建项目的方式: a . 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就

  • 使用vue-cli(vue脚手架)快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • 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

  • 使用vue-cli4.0快速搭建一个项目的方法步骤

    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然当时vue-cli也出来了一段时间,但是不敢轻易尝试啊!) 所以使用的环境还是 vue2.x 版本的,而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!) 所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁移 现在终于到了空闲期,可以尝试着慢慢迁移了 本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建

随机推荐