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

我心飞翔 分类:vue

上一篇写了写给后端开发的『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官网。

回复

我来回复
  • 暂无回复内容