Vue

现在我们开始来针对Vue做配置了,先来安装Vue。

npm i -S vue

提示

我们这里使用的vue版本为v3.2.41

然后模仿Vue-Cli新建一个App.vue文件,在index.ts配置初始化Vue实例,以及在public/index.html配置绑定节点。

<!-- src/App.vue -->
<template>
  <section class='app'>
    {{text}}
  </section>
</template>
<script lang='ts' setup>
import { ref } from "vue";
const text = ref("hello world!");
</script>

<style lang='scss' scoped>
.app {
  color: red;
}
</style>
// src/index.ts
interface Test {
  a: number;
  b: string;
}

const test: Test = {
  a: 111,
  b: "111",
};

console.log(test);

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");













 
 
 
 
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3-scaffolding-tutorial-example</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>










 


SPONSORS 赞助商
Vue.js
渐进式JavaScript框架
your logo