Vue的介绍以及环境搭建

一、前言Vue单页Web应用Vue组件化开发Node.js完成服务器功能ElementUI有效实现界面弹性盒子布局与SASS二、Vue组件1、全局注册组件2、局部注册组件三、Vue环境搭建1.安装Vue的前置条件是安装node.js2.安装vue脚手架3.在visual studio code中新建vue项目4.vue.js文件源代码的下载三、Vue程序运行

文章共6,289字 · 阅读需要大约21分钟

一键AI生成摘要，助你高效阅读

问答

想这世界简单点

9140人浏览 · 2023-05-31 19:52:13

想这世界简单点 · 2023-05-31 19:52:13 发布

1.安装Vue的前置条件是安装node.js

2.安装vue脚手架

3.在visual studio code中新建vue项目

4.vue.js文件源代码的下载

三、Vue程序运行

一、前言

Vue单页Web应用

单页web应用就是只有一张Web页面的应用

单页应用程序（SPA）是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这一张页面上完成，都由JavaScript来控制

因此，单页应用来说模块化的开发和设计显得相当重要。

优点：

提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可以执行和可访问性
单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷
单页应用没有页面之间的切换，就不会出现“白屏现象”，也不会出现假死并有“闪烁”现象
单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍
良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

Vue组件化开发

组件化开发是Vue最强大的功能之一，程序员用独立可复用的小组件来构建大型应用，让开发效率更快更敏捷。

增加可维护性。

组件化，顾名思义，把重复的代码提取出来合并成为一个个组件，成为一个个小的单位。

组件最重要的就是复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用。

多个组件可以组合成组件库，组件间也可以嵌套，小组件组合成大组件。

利用好组件化开发，开发一个页面，就像是搭积木一样，将各个组件拼接到一起，最后融合到一起，就是一个完整的系统。

使用组件化开发可以降低整个系统的耦合度，在保持接口不变的情况下替换不同的组件快速完成需求。

在组件化开发下，整个系统是通过组件结合起来的，在出现问题的时候，可以排除法直接移除组件，或者根据报错的组件快速定位问题。因为每个组件之间的低耦合，职责单一，所以逻辑会比分析整个系统简单，从而实现快速定位。

由于每个组件的职责单一，并且组件在系统中是被复用的，所以随代码进行优化可获得系统的整体升级，提高系统可维护性。

Node.js完成服务器功能

2008年Chrome发布，其JavaScript引擎V8的高效执行引起了Ryan Dahl的注意。2009年，Ryan利用Chrome的V8引擎打造了基于事件循环的异步I/O框架——Node.js诞生。

以下特点：

基于事件循环的异步I/O框架，能够提高I/O吞吐量

单线程运行，能够避免多线程变量同步的问题

使得JavaScript可以编写后端代码，前后端编程语言统一。

ElementUI有效实现界面

使用ElementUI实现后台管理页面

与Vue组合使用

弹性盒子布局与SASS

弹性盒子是css3的一种新布局模式

（Flexible Box）是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当行为的布局方式。

搭配SASS，更易于维护。

二、Vue组件

1、全局注册组件

组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。

组件特性：

能够减少重复代码的编写，提高开发效率

降低代码之间的耦合程度，使项目更易维护和管理

根据业务逻辑实现复杂项目功能

使用Vue.component定义全局组件。全局组件定义格式如下：

Vue.component(
          “[组件名]”,

          {       data:function()

                  {//“:function”可以省略
                          return{  name:”[值]”  }
                  },
                  template:”[组件内容]”
          }
)

第一个参数是定义组件名。

第二个参数data必须是函数，该函数返回的是组件的数据。

第三个参数是定义组件的内容。

举个例子：

Vue.component(
          “my-component”,

          {       data ()

                  {
                         return{  name:”One”  }

                  },

                  template:”<div>我是全局组件{{name}}</div>”
          }
)

案例：

<div id="app">
      <my-component></my-component >
      <my-component></my-component >
      <my-component></my-component >
  </div>
  <script>
      Vue.component(
      'my-component',
      {	data ()
        { 
          return{  count:0  }
        },
        template:'<button v-on:click="count++">被单击{{count}}次</button>'
      }
  )
  var vm=new Vue({el:'#app'})
  </script>

2、局部注册组件

注册局部组件：局部注册组件是通过Vue实例的components属性来实现的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <my-component></my-component >
    </div>
  <script>
      var com1={
        template:'<p>我是vm实例中的局部组件</p>'//com1对象定义了组件的内容
      }
      var vm=new Vue({
        el:'#app',
        //注册局部组件
        components:{myComponent:com1}
//myComponent是自定义组件的名字。com1是一个对象
      }
      )
  </script>  
  </body>
</html>

3、template模板（重点推荐）

template模板：Vue提供了<template>标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这种方式便于高效率地编写功能复制的组件。

因为采用这种方式编写组件，可以在编译器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{title}}</p>
      <my-component></my-component >
  </div>

  <template id="tmp1">
    <p>{{title}}</p>
  </template>
  <script>
      Vue.component(
      'my-component',
      {	
        template:'#tmp1',
        data ()
        { 
          return{  
            title:'我是组件内的title',
            }
        },
      }
  )
  var vm=new Vue({el:'#app',
      data:{
        title:'我是vm实例的title'
      }
})
  </script>  
  </body>
</html>

4、组件之间数据传递

组件之间的依赖关系：父组件（或父容器）和子组件之间可以借助一些工具来实现数据传递。

案例：props子组件接收父容器传递到数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <Child name="八佰"></Child>
        <Child name="花木兰"></Child>
        <Child name="姜子牙"></Child>
    </div>
    <script>
        //'Child'是子组件
        Vue.component('Child',{
            props:['name'],
            //下面是子组件的内容
            template:
            `<div style="color:blue;font-size:30px;">
                今日上映电影:{{name}}
             </div>`
        })
        var vm=new Vue({
            el:'#app'
        })
    </script>  
  </body>
</html>

$emit传值：$emit能够将子组件中的值传回到父容器中。$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <Parent></Parent>
    </div>
//定义子组件模板
    <template id="child">
        <div>
            <button @click="click">Send</button>
            <input type="text" v-model="message">
        </div>
    </template>
    <script>
       //'Parent'是父组件
    //父组件定义事件处理函数transContent，并接收payload参数
        Vue.component('Parent',{
            template:
            `<div>
                <Child @childFn="transContent"></Child>
                子组件传来的值：{{message}}
             </div>`,
            data(){
                return{
                    message:''
                }
            },
            methods:{
                transContent(playload){
                    this.message=playload
                }
            }
        })
        //Child组件
//触发父组件中绑定的childFn事件，并传递子组件中的message数据
        Vue.component('Child',{
            template:'#child',
            data(){
                return{
                    message:'子组件的消息'
                }
            },
            methods:{
               click(){
                    this.$emit('childFn',this.message);
                }
            }
        })
        var vm=new Vue({
            el:'#app'
        })
    </script>  
  </body>
</html>

5、组件切换

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <a href="#"@click.prevent="flag=true">登录</a>
        <a href="#"@click.prevent="flag=false">登录</a>
        <login v-if="flag">
        </login>
        <register v-else="flag"></register>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        })
        Vue.component('register',{
            template:'<div>注册页面</div>'
        })
        var vm=new Vue({
            el:'#app',
            data:{flag:true}
        })
    </script>  
  </body>
</html>

初始页面和点击登录时：

点击注册时：

组件的切换还可以通过组件的is属性来实现，使用is属性来匹配组件的名称。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <a href="#"@click.prevent="comName='login'">登录</a>
        <a href="#"@click.prevent="comName='register'">注册</a>
        <component v-bind:is="comName"></component>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        });
        Vue.component('register',{
            template:'<div>注册页面</div>'
        });
        var vm=new Vue({
            el:'#app',
            data:{comName:''}
        })
    </script>  
  </body>
</html>

三、Vue环境搭建

1.安装Vue的前置条件是安装node.js

下载链接：Download | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/en/download/

我选择的是zip格式的64bit

解压后，双击安装，一路next到安装完成，没有特别的地方。

（也可以直接下载我上传的资源）

https://download.csdn.net/download/pzcxl/87849399https://download.csdn.net/download/pzcxl/87849399

安装成功后，配置node的环境变量（此电脑——>属性——>高级系统设置——>环境变量），在系统变量的path编辑，然后点击新建
输入node的安装路径

环境配置成功后，cmd调出命令提示符界面，输入node -v以及npm -v查看是否安装成功

2.安装vue脚手架

脚手架是官方的，安装命令：

①npm i -g @vue/cli （安装脚手架）

②npm i -g @vue/cli-init （兼容2.0（支持npm run dev等命令））

③安装以上两个之后，配置vue的环境变量，找到vue.cmd的目录所在（如果忘记了安装在哪里，可以全盘搜索），复制路径，在path中新增环境变量，如下图：

④继续在命令提示符中输入：vue --version 或 vue -V 查看当前版本。如下

3.在visual studio code中新建vue项目

1.在电脑中创建一个空文件加用于存放vue项目（在vue中,项目名不能带中文、大写字母、特殊符号,项目名可采用小写方式,以短横线分隔）

2.打开visual studio code软件（去官网下载就可以Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/）

点击File(文件)–>open Folder（打开文件夹）–>
选择新建的空文件夹，点击确定，然后同时点击ctrl+shift+~键，打开终端窗口，输入vue init webpack [项目名]

3.成功后会出现？Project name [项目名]

4.点击enter键，会让你选择一些选项，全部enter一键到底就可以

等待下载完成，时间可能比较久，不急

5.出现如下页面说明创建项目成功了，左上角就出现了如下的项目结构，就可以开发vue项目了

如上图所示的vue.js，需要去官网下载，步骤如下：

4.vue.js文件源代码的下载

1.我们点击下方链接，前往vue.js的官网，vue.js的官网链接地址：https://cn.vuejs.orghttps://cn.vuejs.org/2.进入官网后，选择文档vue 2 文档，如下图所示:

3.进入Vue 2 首页后，点击起步按钮。

4. 在vue 2页面中，向下滑动鼠标，直至看到<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>，如下图所示

5.打开新的浏览器窗口，将src中的js文件(比如https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js)，复制到窗口的地址栏中，如下图所示:

6.点击Ctrl+A全部复制，粘贴到新建的vue.js文件中，保存

完成以上步骤之后，我们试试刚才的程序。

三、Vue程序运行

1.新建一个页面index.html，进入刚才新创建的vue.js

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component></my-component >
      <my-component></my-component >
      <my-component></my-component >
  </div>
  <script>
      Vue.component(
      'my-component',
      {	data ()
        { 
          return{  count:0  }
        },
        template:'<button v-on:click="count++">被单击{{count}}次</button>'
      }
  )
  var vm=new Vue({el:'#app'})
  </script>  
  </body>
</html>

2.点击左边的运行和调试按钮

3.选择浏览器之后，就能看到页面了

这三个按钮之间是互不影响的，点击一次单击次数会加一

以上就是Vue的介绍、环境搭建以及第一个程序的运行了。

若有错误的话希望大家给我批评指正，不吝赐教。

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/