使用姿势
使用es module
- 通过
<script type="module">使用es module方式导入vue，即可用import/export语法和拆分组件 - 使用Import Maps 导入mjs，简化包路径导入
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
模板提示
- 使用
/*html*/+ vscode es6-string-html 扩展，写template
js提示
- 使用
npm i vue安装vue依赖，就可以在vscode中获得提示
使用自动工具自动提示代码
代码
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"element-plus": "https://unpkg.com/element-plus@2.3.12/dist/index.full.mjs"
}
}
</script>
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.12/dist/index.css" />
<title>test</title>
</head>
<body>
<div id="app">
</div>
<script type="module">
import { createApp } from 'vue'
import App from './app.js'
import ElementPlus from 'element-plus'
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
// app.js
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const buttonClick = () => {
count.value++
}
return { count, message: 'add count', buttonClick }
},
template: /*html*/`
<div>count is {{ count }}</div>
<el-button @click="buttonClick">{{ message }}</el-button>
`
}
