Vue3 环境搭建&初步尝试

* : 本篇博客为原创,编辑不易,转载请注明出处

本篇博客已windows为例

首先全局安装vue-cli3.0级以上版本
npm install -g @vue/cli

安装后,用vue-cli快速构建一个Vue项目(项目名随意,这里我用的是:preliminary_attempt_vue3

 vue create preliminary_attempt_vue3

如下图所示,选最后一项自定义配置

在这里插入图片描述
这里我选的几项默认配置如下图所示

在这里插入图片描述继续往下进行,Vue的版本选3.0,剩下的选项自己酌情而定或者默认全选第一个就可以(不做过多赘述)
在这里插入图片描述按照提示进入项目目录并启动项目(我用的是yarn
在这里插入图片描述在这里插入图片描述
成功启动!
在这里插入图片描述OK,接下来看看Vue3的一些基础特性(深奥的本人也有待研究,惭愧~~)

下图为默认的目录结构,我们可以把自带的组件和页面删掉,自己新建(本人强迫症)
在这里插入图片描述
先来看一下组合式 API :Setup()
Setup()里无需datemethods
数据可以直接定义成变量并用 ref 初始化
方法直接定义一个函数
最后记得return出去

新建HomePage.vue文件,内容如下

HomePage.vue

<template>
    <div>
        <h1>{{ str }}</h1>
        <h3>counter 的值为 => {{ counter }}</h3>
        <button @click="selfIncreasing">counter 加一</button>
    </div>
</template>

<script>
import { ref } from "vue";
export default {
    setup() {
        // 初始化一个数据要用 ref() 函数传参形式声明,才能绑定到view
        const str = ref("Vue3初探~");

        const counter = ref(0);

        // 如果想改变 ref() 初始化的数据,要用 (数据源.value)
        const selfIncreasing = () => counter.value++;

        // setup() 里定义的变量或是方法一定要return暴露出去,才可以被调用或读取
        return {
            str,
            counter,
            selfIncreasing,
        };
    },
};
</script>

<style>
</style>

App.vue 更改内容如下

App.vue

<template>
    <router-view />
</template>

<style lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>

src/router/index.js 内容修改如下

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: () => import('../views/HomePage.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

运行代码
在这里插入图片描述在这里插入图片描述再来看一下用计算属性承载vuex的状态以及操作
具体说明我在每行代码的上方写了注释
直接看改过后的HomePage.vue

<template>
    <div>
        <h1>{{ str }}</h1>
        <h2>{{ Author }}</h2>
        <h3>counter 的值为 => {{ counter }}</h3>
        <button @click="selfIncreasing">counter 加一</button>
        <button @click="Renaming">改名</button>
    </div>
</template>

<script>
//  组合式 API setup中内置方法几乎都要引用
import { ref, getCurrentInstance, computed } from "vue";
export default {
    setup() {
        // 初始化一个数据要用 ref() 函数传参形式声明,才能绑定到view
        const str = ref("Vue3初探~");

        const counter = ref(0);

        // 如果想改变 ref() 初始化的数据,要用 (数据源.value)
        const selfIncreasing = () => counter.value++;

        // getCurrentInstance() 用于访问对高级用法或库创建者有用的内部组件实例
        // router vuex attrs emit props 等
        const { ctx } = getCurrentInstance();

        // vue3中 computed() 的用法 接受一个为函数的参数,并且此函数返回处理后的数据
        const Author = computed(() => ctx.$store.state.Author);

        // vue3 中的commit方法如下所示
        const Renaming = () => ctx.$store.commit("operationAuthor", "YangQinaLi");

        // setup() 里定义的变量或是方法一定要return暴露出去,才可以被调用或读取
        return {
            str,
            counter,
            selfIncreasing,
            Author,
            Renaming,
        };
    },
};
</script>

<style>
</style>

src/store/index 新增内容如下

import { createStore } from 'vuex'

export default createStore({
  state: {
    Author: "YQL"
  },
  mutations: {
    operationAuthor(state, data) {
      state.Author = data
    }
  },
  actions: {
  },
  modules: {
  }
})

运行代码
在这里插入图片描述
在这里插入图片描述

OK,大概已经了解了一点新特性的皮毛了~~。

求大神轻喷

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值