使用vscode书写三个简单的文件并使用vue

最新推荐文章于 2024-10-03 15:03:48 发布

原创最新推荐文章于 2024-10-03 15:03:48 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vscode #vue.js #javascript

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

Vue

10 篇文章

订阅专栏

本文介绍了如何使用VSCode创建一个简单的Vue项目，包括三个关键文件：index.html作为入口页面，app.js作为Vue页面入口，以及style.css用于样式设置。详细讲述了每个文件的作用和内容，涉及到Vue的项目结构和CSS的引入方式。

三个最基本的文件分别是：index.html入口页面 app.js页面入口(包含所有的vue页面) style.css样式

第一个最重要的文件index.html

vue项目的入口页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue CDN</title>
    <!-- 导入vue ，引入js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <div id="vue-app">
        <h1>hello,{{name}}</h1>
    </div>
</body>
<script src="./app.js"></script>

</html>

<!-- 点击运行html，点击Alt+B或Alt+shift+Alt+B -->

第二个重要的文件css

(外部式引入即可)
有ES6 的新引入方式，也有旧的link引入方式。

书写网页的样式

#vue-app {
    background-color: antiquewhite;
}

h1 {
    color: aquamarine;
}

第三个重要的文件app.js

vue页面的页面入口

// alert("测试")
// 实例化vue对象
new Vue({
    el: "#vue-app", //element 当前要操作的DOM
    data() {
        return {
            name: "米斯特吴",
            wechat: '23456',
        }
    }
});