写给后端开发的『vue3』实战入门

上一篇写了写给后端开发的『vue3』前端开发扫盲，本文来施展一下，在vue3项目里开发一个自己的页面，比较简单，内容如下：

1、渲染过程

使用npm run serve时会默认启动本地服务（端口8080），默认会渲染public/index.html页面，所有的内容会渲染到<div id="app"></div>。在此页面的底部会加载如下脚本。

<script type="text/javascript" src="/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/js/app.js"></script></body>

src/main.js会创建vue实例，声明用到的第三方组件，并挂载到#app下，其中加载了App.vue。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

在App.vue中<template>就是第二层模版了，<router-view>将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。<style>中就是基础的css样式。

2、配置路由

在router/index.js中加入一个自己的路由，并在views目录下创建视图sayHi.vue，当访问/sayHi路径时，sayHi.vue就会渲染。

# @表示src
import sayHi from "@/views/sayHi"
# 加入到routes数组中
{
    path: "/sayHi",
    name: "sayHi",
    component: sayHi
 }
 # 方便演示，在App.vue中新增一个链接
 <router-link to="/sayHi">sayHi</router-link>

3、.vue视图

编写步骤2中的sayHi.vue页面，把页面渲染到<template>里即可。剩下的就是<script>和<style>。

编写<template>（html部分）：

<template>
    <div class="hi">
       <!-- 插值表达式，用来引用js里的数据 -->
       {{msg}}
    </div>
    <div class="a">
        {{a}}
        <hr>
        <ul>
            <!-- 使用指令用来循环，names还是js里的数据 -->
            <li v-for="n in names" v-bind:key="n.id">
                {{ n.id }}--{{n.name}}
            </li>
        </ul>
    </div>
    <div>
        <!-- 使用一个element-plus的button，加一个点击事件 -->
        <el-button type="primary" @click="say('star')">哈哈 一个按钮</el-button>
    </div>
</template>

编写<script>js脚本：

<script>
import { ElMessage } from 'element-plus'
import { h } from 'vue'
export default {
    data(){
        let a = "aaaaa"
        return {
            msg: "你好呀，vue3！",
            <!-- 键值对名称一致时，略写 -->
            a,
            names:[
                {id:1,name:'star'},
                {id:2,name:'moon'},
                {id:3,name:'sun'}
            ]
        }
    },
    methods:{
        say:function(name){
            <!-- el的一个提示框-->
            ElMessage({
                message: h('p', null, [
                    h('span', null, 'hello '),
                    h('i', { style: 'color: teal' }, name),
                ]),
            })
        }
    }
}
</script>

再写几个简单的css样式：

<style>
.hi{
    color: red;
    font-size: 40px;
}
.a{
    color: cadetblue;
    font-size: 60px;
}
ul li{
   list-style: none; 
}
</style>

好了，经过上面几个步骤，基本就可以去开发前端vue项目了，如果参见本文有任何与预期不一致的地方，那一定是本文写错了，还请参见vue官网。