Vue.js 概述

介绍

在本文中，我们将了解 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 create demoname

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

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

npm run serve

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

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

<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>

npm install bootstrap-vue bootstrap --save

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

<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>

<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>