*注 : 本篇博客为原创,编辑不易,转载请注明出处
本篇博客已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()
里无需date
和methods
数据可以直接定义成变量并用 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: {
}
})
运行代码