Vue3演练场，在线编辑，实时预览、在线运行。

index.html

main.js

App.vue

HelloBicool.vue

global.css

package.json

README.md

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

            
            <!doctype html>
<html>
<head>
  <meta charset="UTF-8" />

  <!-- 引入 vue 入口文件 -->
  <script type="module" src="./main.js"></script>
  
</head>

<body>
  <div id="app"></div>
</body>

</html>

main.js

            
                1
2
3
4
5
6
7
8

            
            import { createApp } from 'vue'
import './global.css'
import App from './App.vue'

createApp(App).mount('#app')

console.log(["Hello 笔.COOL 控制台"])

App.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

            
            <script setup>
import HelloBicool from './HelloBicool.vue'
import { ref } from "vue"

const title = ref("Hello 笔.COOL");
const descr = ref("一笔一划，绘就人生；一码一境，酷创未来。");
</script>

<template>
  <div class="container">

    <HelloBicool :title="title" :descr="descr" />

    <img class="logo" src="https://bi.cool/static/case-materials/icons/vue.svg"/>

  </div>
</template>

<style lang="scss" scoped>
$bg: #f0f2f5;

.container {

  background: $bg;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.logo {
  height: 40px;
  width: 40px;
  margin-top: 20px;
}
</style>

HelloBicool.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

            
            <script setup>

defineProps({
  title: String,
  descr: String,
})

</script>

<template>
  <h1>{{ title }}</h1>
  <p><i>{{ descr }}</i></p>
</template>

<style lang="scss" scoped>
h1 {
  color: #333;
  text-align: center;
}

p {
  color: #666;
  text-align: center;
}
</style>

global.css

            
                1
2
3

            
            body {
  background-color: #fefefe;
}

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5

            
            {
    "dependencies": {
      "vue": "3.5.15"
    }
  }

README.md

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

            
            # Vue3 项目模板

笔COOL提供的基础 Vue 项目

## 用途

- 想要简单练习 Vue
- 展示自己的 Vue 作品

## 文件

- **index.html**: 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
    - 内容包含 Vue 实例所挂载的 root 节点 `<div id="app"></div>`
- **main.js**: vue 主入口 js 文件，负责初始化 Vue 实例，通过 `index.html` 引入
- **global.css**: 全局样式文件，通过 `main.js` 引入
- **App.vue**: App组件
- **HelloBicool.vue**: HelloBicool组件
- **package.json**: npm 包管理文件，你可以继续添加其他依赖包 **【注意：首次引入新依赖可能会报错，稍后再次刷新即可】**
    - 目前已引入的包：
        - `"vue": "3.5.15"`

## 内容

- 标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来"，一个 Vue 图标
- 控制台输出 `["Hello 笔.COOL 控制台"]`，展示控制台能力

## 模板使用

- 首页点击 **创建项目**，选择 **新建 Vue3 项目** 即可使用该模板

- 或访问 https://bi.cool/project?template=vue_3_5_js 即可进入此模版

预览

控制台

清空