VS2022创建Vue3单页面

1、创建项目

2、创建html页面

2.1 创建文件夹Content和Forms,且在Content文件夹创建子文件Js和Css

2.2 添加页面

  1. 在Forms文件夹添加文件HtmlVuePage.html
  2. 在Js文件夹添加文件HtmlVuePage.js
  3. 在Css文件夹添加文件HtmlVuePage.css

2.3 HtmlVuePage.html引入组件

采用CDN方式引入Vue3,axios和Element-plus组件,同时引入自定义js和css文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单页面引入Vue3演示</title>
    <!-- Import element-plus style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import axios -->
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Import element-plus -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- Import 自定义样式 -->
    <link rel="stylesheet" href="../Content//Css//HtmlVuePage.css" />
</head>
<body>
    <div id="app">

    </div>
    <script src="../Content/Js/HtmlVuePage.js"></script>
</body>

</html>

2.4 添加vue页面代码

<div id="app">
	<h2> {{ message }}</h2>
</div>

2.5 添加js代码

var app;
initVue();
function initVue() {
    const App = {
        data() {
            return {
                message: "",
                loading: false
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.message = "hello world"
            }
        }
    }
    app = Vue.createApp(App)
    app.use(ElementPlus)
    app.mount("#app")
}

2.6运行查看效果

posted @   Destiny、Yang  阅读(407)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示