Vue安装方式

最新推荐文章于 2024-08-29 17:07:09 发布

眉间是银河

最新推荐文章于 2024-08-29 17:07:09 发布

阅读量274

点赞数 5

分类专栏： 100个Vue小Demo 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42242810/article/details/141408336

版权

100个Vue小Demo 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

第一句话“软件工程学源于建筑工程学”

进入正题：

安装 Vue：你可以通过 npm 或直接在 HTML 文件中引入 Vue 的 CDN 链接来安装 Vue。
```
npm install vue
```
或者在 HTML 文件中：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```

创建 Vue 实例：在你的 JavaScript 文件中创建一个 Vue 实例，并将其挂载到一个 DOM 元素上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

使用组件：你可以创建自定义组件并在 Vue 实例中使用它们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 组件示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template: '<div>这是一个自定义组件!</div>'
        });

        new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

使用 Vue CLI：对于更复杂的项目，你可以使用 Vue CLI 来创建和管理项目。运行该命令会在目录生成相关文件夹，用于存放不同的开发代码。CLI脚手架与建筑工程学中的脚手架有异曲同工之妙。
```
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
```

眉间是银河

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue安装方式

对于更复杂的项目，你可以使用 Vue CLI 来创建和管理项目。运行该命令会在目录生成相关文件夹，用于存放不同的开发代码。CLI脚手架与建筑工程学中的脚手架有异曲同工之妙。：在你的 JavaScript 文件中创建一个 Vue 实例，并将其挂载到一个 DOM 元素上。：你可以通过 npm 或直接在 HTML 文件中引入 Vue 的 CDN 链接来安装 Vue。：你可以创建自定义组件并在 Vue 实例中使用它们。
复制链接

扫一扫