Vue.js 3.x页面开发
VUE3页面开发
<html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- 导入Vue3 --> <script src="https://unpkg.com/vue@next"></script> <title>VUE3</title></head><body> <div id="app"> 消息：{{message}} </div> <script> const app = { data() { return { message: "学习VUE3" } } }; // Vue3的应用，通过使用createApp函数来创建 // 通过mount()挂载应用，组件被用作渲染的起点 Vue.createApp(app).mount("#app"); </script></body></html>VUE3页面开发使用Element Plus
<html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- 导入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> <!-- 导入Vue3 --> <script src="https://unpkg.com/vue@next"></script> <!-- 导入组件库（JavaScript） --> <script src="https://unpkg.com/element-plus"></script> <title>Element Plus例子</title></head><body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script> const App = { data() { return { message: "Hello Element Plus", }; }, }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script></body></html>Vue CLI开发
Vue CLI是一个基于Vue.js进行快速开发的完整系统。
vue-cli搭建项目：脚手架创建
VUE3的Demo
src/router/index.ts
src/App.vue
Demo01View.vue
<template> <div> <h1>消息：{{message}}</h1> <button @click="getMessage()">弹出消息</button> </div></template><script lang="ts">//vue-class-component是vue对typescript支持的装饰器库import { Vue } from 'vue-class-component';export default class Demo01 extends Vue { // 初始化数据 message = 'VUE脚手架创建'; // 生命周期钩子声明，保留名称 mounted() { this.greetForMounted(); } getMessage() { alert(this.message); } // method方法可以声明成类方法形式 greetForMounted() { console.log('greetByMounted: ' + this.message); }}</script>VUE3集成element-plus
安装：
npm install element-plus --save
main.ts
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus from 'element-plus' // 引入element-plusimport 'element-plus/theme-chalk/index.css' // 引入element-plus的样式createApp(App) .use(store) .use(router) .use(ElementPlus, { zIndex: 3000, size: 'small' }) // 使用element-plus .mount('#app')Demo01View.vue
<!-- element-plus按钮 --><el-button type="primary">hello element-plus</el-button>版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除