Vue.js 入门



Vue.js 入门

在上一章中,我们已经看到了在项目中使用和安装Vue.js的几种方法。在本文中,我们将了解如何检查Vue.js的版本,在项目中使用Vue.js的优缺点,第一个示例以及与该示例有关的所有一般要点的说明。

使用Vue.js的优点

Vue.js是最新的软件技术之一,广泛用于Web开发和构建单页应用程序。您可以通过名称来猜测,它主要用于项目的UI或视图侧。它是由Evan You(前Google员工,当时在Angular工作)开发的基于JavaScript的框架,用于使用JavaScript构建富客户端应用程序。让我们看看在项目中使用Vue.js的优点:
以下是使用Vue.js的优点列表:
轻量级
Vue.js的最大优点之一就是轻量级。一个JavaScript框架的成功很大程度上取决于它的大小,这个令人兴奋的JavaScript插件只有18-21KB,因此您可以立即轻松下载和使用它。
易于理解
Vue.js框架具有非常简单的结构并且非常易于理解。这是该框架流行的原因之一。如果您熟悉HTML和JavaScript,则可以轻松地在Vue.js中进行编码。由于其结构简单,用户可以轻松地将Vue.js添加到他们的Web项目中并开发应用程序。
与现有应用程序的简单集成
Vue.js它具有用于所有内容的许多组件,并且可以非常快速地与现有应用程序集成。您可以将其与任何用JavaScript编写的应用程序集成。
灵活使用
Vue.js的灵活性使React.js,Angular.js和任何其他新的JavaScript框架的开发人员都易于理解。它为使用虚拟节点编写HTML文件,JavaScript文件和纯JavaScript文件提供了很大的灵活性。
组件化
您可以在以下位置创建可重复使用的自定义元素Vue.js应用程序。
文档全面
Vue.js提供了非常简单,全面,详细的文档,因此拥有
虚拟DOM
Vue.js使用虚拟DOM的方式类似于其他现有框架,例如ReactJS, Ember等。虚拟DOM是原始HTML DOM的轻量级内存树表示形式,并且在不影响初始DOM的情况下进行了更新。
双向通信
Vue.js通过其MVVM体系结构提供双向通信,这使得处理HTML块非常容易ks。

使用Vue.js的公司

Vue.js越来越受到欢迎,因为著名公司已经开始实时使用它。有几家公司在实际场景中成功使用了Vue.js。让我们看一些例子:
Facebook: 在其现实生活项目中使用Vue.js的最大成功公司是Facebook。 Facebook在其Newsfeed的营销方面正在使用此框架。
Adob​​e : Adobe在其名为Portfolio的产品中使用了Vue.js。利用Vue.js框架的轻松集成优势,该公司已经将其现有的代码库迁移到了Vue。
小米: 小米还使用Vue.js来构建其产品目录。
阿里巴巴: 中国最重要的上市公司之一使用了Vue.js。
其他一些著名的公司在他们的项目中使用Vue.js的是:

Grammarly
Netflix
Laracast
Behance
Gitlab
Euronews
Codeship
Livestorm
Wizzair等

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

如果您已经熟悉Node.js,并在系统上安装了Vue.js CLI,您可以使用以下命令检查已安装的Vue.js的版本Node.js命令提示符上的以下命令:

打开Node.js命令提示符并运行以下命令:

 vue --version


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第1张
如果响应良好,请继续执行下一步以创建新项目。在上面的示例中,您可以看到Vue.js版本2.9.6已成功安装。现在,运行以下命令来创建一个新项目:

语法:
 vue create <YourAppName>

运行 vue create myfirstapp 命令以创建一个名为的应用
Vue.js 入门_https://bianchenghao6.com_【vue教程】_第2张
您已经看到vue create命令仅适用于Vue CLI 3的错误,并且您使用的是旧版本。现在,使用以下命令卸载旧版本并安装新版本。

 npm uninstall -g vue-cli
npm install -g @vue/cli


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第3张
您会看到Vue.js的旧版本已卸载。现在,安装较新的版本。
Vue.js 入门_https://bianchenghao6.com_【vue教程】_第4张


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第5张
现在,已安装较新版本的Vue CLI。您可以使用 vue --version 检查Vue CLI版本
Vue.js 入门_https://bianchenghao6.com_【vue教程】_第6张
您可以看到已安装最新的Vue CLI版本。现在,运行 vue create myfirstapp 命令创建一个应用

创建Vue.js第一个应用程序(使用vue创建命令)

在Node.js命令提示符下运行 vue create myfirstapp 命令。
Vue.js 入门_https://bianchenghao6.com_【vue教程】_第7张
此过程可能需要一些时间。等待直到创建应用程序过程完成。成功完成后,您将在命令行上看到一条消息,说明已成功创建项目。
Vue.js 入门_https://bianchenghao6.com_【vue教程】_第8张
现在,通过执行以下命令转到应用程序的位置。

 cd myfirstapp


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第9张
执行以下命令以在浏览器上运行Vue.js应用。

 npm run serve


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第10张
在这里,您可以看到您的应用程序已成功编译,并且开发服务器已启动。复制本地地址并将其粘贴到您的Google Chrome浏览器中以打开应用。
Vue.js 入门_https://bianchenghao6.com_【vue教程】_第11张

浏览文件夹结构Vue应用程序

您已经在网络浏览器上执行了您的应用程序。现在,是时候探索项目的完整文件和文件夹了。您可以选择任何IDE。在这里,我们
选择了Visual Studio Code IDE 来部署我们的应用程序。
打开Visual Studio Code并将您的项目加载到IDE中。加载项目后,单击
public 文件夹以及
src 文件夹。这两个文件夹包含您项目中最重要的文件。

Vue.js 入门_https://bianchenghao6.com_【vue教程】_第12张

Package.json: : Package.json文件夹包含您应用的所有配置。您无需触摸该文件夹。
Index.html: : 应用程序中最重要的文件是index.html文件。它包含出现在应用程序UI上的所有数据。这是Vue用来附加DOM的唯一一个div元素。请参阅index.html文件:
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第13张

Src/main.js : : main.js是用于驱动您的应用程序的主要JavaScript文件。
 import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第14张

在上述main.js代码中,第一行指定Vue库的导入,第二行用于从app.vue导入应用程序组件。 productionTip设置为false以避免在控制台中显示消息"您处于开发模式"。之后,通过将Vue实例分配给DOM元素#app来创建该实例,该元素已经在index.html文件中定义并指定为使用App组件。
Src/App.vue: App.vue是包含三个部分的单个文件组件:
HTML,CSS和JAVASCRIPT 。它用于管理应用程序的单个文件组件。
 <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',a
  components: {
    HelloWorld
  }
}
</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 入门_https://bianchenghao6.com_【vue教程】_第15张

Src/component/HelloWorldComponent : : 此文件包含在HelloWorld.vue文件中。该文件包含在浏览器中打开应用程序时看到的所有样式和HTML。
 <style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<style scoped> 属性在此处用于将上述
CSS 限制为仅此组件。使用<style scoped>属性后,您的CSS将不会泄漏到另一部分。

Vue.js 入门_https://bianchenghao6.com_【vue教程】_第16张

<script>部分: 该部分以"HelloWorld"名称导出,将在输出中显示的数据存储在"msg"中变量。
 < script> 
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    }
}
</script>


Vue.js 入门_https://bianchenghao6.com_【vue教程】_第17张

这与文件和文件夹有关Vue.js应用的结构。在开始使用Vue.js开发应用程序之前,有必要了解。