Vue.js 概述

作者 : 慕源网 本文共2163个字,预计阅读时间需要6分钟 发布时间: 2021-11-19 共183人阅读

介绍

在本文中,我们将了解 Vue.js 的基本概念以及如何安装 Vue.js 并创建一个新项目。

什么是 Vue.js

Vue.js 是一个开源前端 JavaScript 框架,用于构建用户界面和单页应用程序 (SPA)。Vue.js 通常被称为 Vue,发音为 View。

根据官方 Vue.js 文档,

Vue 是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue 从头开始​​设计为可逐步采用。核心库仅专注于视图层,易于获取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue 也完全有能力为复杂的单页应用程序提供支持。

Vue 是由在谷歌工作的 Evan You 创建的。

先决条件

  • HTML 和 JavaScript 的基本知识。
  • 文本编辑器。

Vue.js 安装

添加 Vue.js 的方法有很多。我们可以从其官方网站安装它或使用 CDN 链接添加。在本文中,我们将使用 CLI 安装 Vue.js 并创建一个项目。 

使用以下命令安装 Vue.js CLI,

npm install -g @vue/cli

检查已安装的 Vue.js 的版本

使用以下命令检查版本。您可以从这里检查所有必需的 CLI 命令,

vue --version

Vue.js 概述

 

创建 Vue.js 项目

要创建一个新的 vue.js 项目,请使用以下命令,

vue create demoname

Vue.js 概述

 

运行以下命令并选择 vue 3 preview 并按回车键,

Vue.js 概述

Vue.js 概述

现在,在 Visual Studio 代码中打开此项目并使用以下命令运行该项目,

npm run serve
Vue.js 概述

现在右键单击 components 文件夹并添加一个名为“Home.vue”的新文件,它会创建一个新组件。将以下代码添加到此组件。

<template>
    <div>
<h1>Welcome to Home Page</h1>
    </div>
</template>

<script>
    export default {
        name:"Home"
    }
</script>
<style lang="scss" scoped>
</style>

现在打开 app.vue 文件并导入 home 组件。在 app.vue 组件中添加以下代码。

<template>
<Home/>
</template>

<script>
import Home from './components/Home.vue'
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

现在运行项目并检查。

Vue.js 概述

安装引导程序

要安装引导程序,请使用以下命令,

npm install bootstrap-vue bootstrap --save

现在打开 main.js 文件并导入引导程序引用。

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

现在右键单击 Src 文件夹 > components 文件夹并创建一个名为“About.vue”的新组件。并在此文件中添加以下代码。

<template>
<div class="container">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
</div>
</template>
<script>
    export default {
        name:"About"

    }
</script>
<style lang="scss" scoped>
</style>

现在打开 app.vue 文件并导入 About 组件。在 app.vue 组件中添加以下代码。

<template>
<About/>
</template>

<script>
import About from './components/About.vue'
export default {
  name: 'App',
  components: {
    About
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

现在运行项目并检查结果。

总结

在本文中,我们学习了 Vue.js 的基本概念以及如何安装 Vue.js 和创建新项目。


慕源网 » Vue.js 概述

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录