个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈
本项目综合运用了 Vue3.0
的新特性。
- 基于
Composition API
即Function-based API
进行改造,配合Vue Cli
,优先体验Vue3
特性 - 使用单例对象模式进行组件通信
- 使用
axios
库进行网络请求,weui
库实现 UI 界面
# 安装依赖
npm install
# 在浏览器打开localhost:8080查看页面,并实时热更新
npm run serve
# 发布项目
npm run build
建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件
Dependencies
以下是项目运用到的依赖,@vue/composition-api
配合 vue
模块让我们 Vue2.0
版本可以抢先体验 Vue3.0
的新特性,axios
是辅助我们发送网络请求得到数据的工具库,weui
是一套与微信原生视觉一致的基础样式库,方便我们快速搭建项目页面。
"@vue/composition-api": "^0.3.4",
"axios": "^0.19.0",
"core-js": "^3.4.3",
"vue": "^2.6.10",
"weui": "^2.1.3"
Directory Structure
├── src
│ ├── App.vue # 组件入口
│ ├── assets # 资源目录
│ ├── stores/index.js # 状态管理
│ ├── components # 组件目录
│ │ ├── Header.vue # 头部组件
│ │ ├── Search.vue # 搜索框组件
│ │ ├── Panel.vue # 列表组件
│ ├── main.js # 项目入口
├── public # 模板文件
├── vue.config.js # 脚手架配置文件
├── screenshot # 程序截图
Composition API
npm install @vue/composition-api --save
使用 npm
命令下载了 @vue/composition-api
插件以后,引入该模块后,需要显式调用 Vue.use(VueCompositionApi)
,按照文档在 main.js
引用便开启了 Composition API
的能力。
// main.js
import Vue from 'vue'
import App from './App.vue'
// 1.引入Composition API模块
import VueCompositionApi from '@vue/composition-api'
Vue.config.productionTip = false
// 2.不要漏了显式调用 VueCompositionApi
Vue.use(VueCompositionApi)
new Vue({
render: h => h(App),
}).$mount('#app')
npm install weui --save
我们同样使用 npm
安装 weui
模块,然后在 main.js
中引入 weui
的基础样式库,方便我们可以在全局使用微信基础样式构建项目页面。
// main.js
import Vue from 'vue'
import App from './App.vue'
// 全局引入 `weui` 的基础样式库
import 'weui'
import VueCompositionApi from '@vue/composition-api'
Vue.config.productionTip = false
Vue.use(VueCompositionApi)
new Vue({
render: h => h(App),
}).$mount('#app')
回到 App.vue
,保留 components
属性值清空 <template>
模板的内容,删除 <style>
模板,等待重新引入新的组件。
<template>
<div id="app">
Hello World
</div>
</template>
<script>
export default {
name: "app",
components: {}
};
</script>
在 src/components
目录下新建第一个组件,取名为 Header.vue
写入以下代码:
<template>
<header :style="{
backgroundColor: color?color:defaultColor
}">{
{title}}</header>
</template>
<script>
import { reactive } from "@vue/composition-api";
export default {
// 父组件传递进来更改该头部组件的属性值
props: {
// 标题
title: String,
// 颜色
color: String
},
setup() {
const state = reactive({
defaultColor: "red"
});
return {
...state
};
}
};
</script>
<style scoped>
header {
height: 50px;
width: 100%;
line-height: 50px;
text-align: center;
color: white;
}
</style>
setup
这里运用了一个全新的属性 setup
,这是一个组件的入口,让我们可以运用 Vue3.0
暴露的新接口,它运行在组件被实例化时候,props
属性被定义之后,实际上等价于 Vue2.0
版本的 beforeCreate
和 Created
这两个生命周期,setup
返回的是一个对象,里面的所有被返回的属性值,