VS2022创建Vue3单页面
1、创建项目
2、创建html页面
2.1 创建文件夹Content和Forms,且在Content文件夹创建子文件Js和Css
2.2 添加页面
- 在Forms文件夹添加文件HtmlVuePage.html
- 在Js文件夹添加文件HtmlVuePage.js
- 在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")
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)