VUE快速入门（跟随秦疆老师学习版）

最新推荐文章于 2023-10-16 12:32:14 发布

霍志杰

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量6.5k

点赞数

分类专栏：前端文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_51444308/article/details/126747419

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

Vue快速入门

一、简介

1.什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

为什么使用VUE

轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch事件
易上手，学习曲线平稳，文档齐全
集Angular(模块化) 和React(虚拟DOＭ) 的优点于一身，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高
官方文档：https://cn.vuejs.org/guide/introduction.html
参考https://blog.csdn.net/qq_45408390/article/details/118151297
https://cloud.tencent.com/developer/article/1842043

2.css预处理器

用一种编程语言，为CSS添加一些编程的特性，最终生成CSS文件。
SASS：基于Ruby，通过服务端处理，功能强大，效率高。
LESS：基于NodeJS，通过客户端处理，功能少一点，效率低一点。但足够使用。

3.视图层

视图：html+css+js
网络通信：axios
页面跳转:vue-router
状态管理:vuex
vue-ui:ICE,.ElementUi

4.JavaScript框架

jQuery：优化了DOM操作，但频繁操作DOM减低了性能。
Angular：将后台的MVC模式搬到了前端并增加了模块化开发的理念。
React：高性能的框架，在内存中模拟DOM操作的虚拟DOM，有效提升了前端的渲染效率。
vue：渐进式JavaScript框架，渐进式就是逐步实现新特性。综合了Angular模块化和React虚拟DOM的优点。
Axios：前端通信框架，也可以使用Ajax.

5.UI框架

Ant-Disign：基于React的
ElementUI：基于Vue（桌面端多）
BootStrap：工具包
AmazeUI：HTML5跨屏前端框架
iView：基于Vue,组件比elementUI更丰富（移动端多）
vue-element-admin

6.多包

Hybrid APP
Hybrid App是指介于web-app、native-app这两者之间的 app ,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。
uni-app
uni-app（uni，读you ni，是统一的意思）是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台.

7.后端服务

Express：NodeJS框架
Koa：Express简化版
NPM：项目综合管理工具，类似Maven
YARN：NPM的替代，类似Maven与Grande

8.Vue是MVVM模式的实现者

Model:模型层，在这里表示JavaScript 对象
View:视图层，在这里表示 DOM (HTML操作的元素)
ViewModel:连接视图和数据的中间件，Vue.js 就是 MVVM中的 ViewModel层的实现者，在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新. ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue.js就是实现了DOM监听与数据绑定，是一个MVVM的实现者。

9.MVVM

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。
MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS
为什么使用MVVM模式
和MVC模式一样，目的是分离视图（View）和模型（Model）
优点：

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。
结构图
View
View是视图层，也就是用户界面。前端主要由HTH L和csS来构建，为了更方便地展现vi eu to del或者Hodel层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。
Model
Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

MVVM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应.
它可以类比成一个观察者，监测到了数据的变化，就立马更新页面与之绑定的值，无需更新页面，也无需操作DOM对象，相当于一个虚拟DOM对象.

二、第一个Vue程序

1.IDEA 安装Vue插件

file->setting->plugins->vue
在这里插入图片描述导入vue
可以官网下载也可以cdn导入

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<!--或-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

2.示例html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<div id="app2">
    {{message}}
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue!",
        }
    });
    var vm = new Vue({
        el:"#app2",
        data:{
            message:"坏蛋阿土来了!"
        }
    });
</script>
</html>

在这里插入图片描述

三、Vue基础语法

1.V-bind(Attribute 绑定 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<div id="app2">
    <span v-bind:title="message"><!--v-bind可以省略-->
        悬停查看
    </span>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue!",
        }
    });
    var vm = new Vue({
        el:"#app2",
        data:{
            message:"坏蛋阿土来了!"
        }
    });
</script>
</html>

v-bind等被称为指令。指令带有前缀v-，以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是:“将这个元素节点的title特性和Vue 实例的message属性保持一致”。

2.v-if v-else(条件渲染)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3 v-if="message">true</h3>
    <h3 v-else>false</h3>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:true
        }
    });
</script>
</html>

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3 v-if="message == 'a'">a</h3>
    <h3 v-else-if="message == 'b'">b</h3>
    <h3 v-else>false</h3>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"a"
        }
    });
</script>
</html>

3.v-for（列表渲染）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message:"坏蛋"},
                {message:"阿土"}
            ]
        }
    });
</script>
</html>

在这里插入图片描述
支持使用可选的第二个参数表示当前项的位置索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in items">
        {{index}}-{{item.message}}
    </li>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message:"坏蛋"},
                {message:"阿土"}
            ]
        }
    });
</script>
</html>

在这里插入图片描述

3.v-on 指令来监听 DOM 事件 (简写为 @)

使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。
方法定义在vue对象的methods属性中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="count++">加1</button>
    <p>Count is: {{ count }}</p>
    <!-- `greet` 是上面定义过的方法名 -->
    <button @click="greet">Greet</button>
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"坏蛋阿土",
            count:0
        },
        methods: {
            greet(event) {
                // 方法中的 `this` 指向当前活跃的组件实例
                alert(`Hello ${this.message}!`)
                // `event` 是 DOM 原生事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    });
</script>
</html>

在这里插入图片描述
方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。

4.v-model 指令来进行表单输入绑定

这个可以帮助我们理解数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <li>文本类型的 input 和 textarea 元素会绑定 value property 并侦听 input 事件 </li>
    <input type="text" v-model="msg1">{{msg1}}<br><hr>
    <textarea name="" id="" cols="30" rows="10" v-model="msg2"></textarea>{{msg2}}<br><hr>
    <li>"<input type="checkbox">" 和 "<input type="radio">" 会绑定 checked property 并侦听 change 事件</li>
    <input type="radio" name="sex" value="nan" v-model="msg3">男
    <input type="radio" name="sex" value="nv" v-model="msg3">女   选择了：{{msg3}}<br><hr>
    <select v-model="msg4">
        <option disabled value="">请选择</option>
        <option>AMR</option>
        <option>AK</option>
        <option>type25</option>
    </select>
    {{msg4}}
</div>
</body>
<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            msg1:"坏蛋阿土",
            msg2:"huaidanatu",
            msg3:"nan",
            msg4:""
    }
    });
</script>
</html>

在这里插入图片描述
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。

四、Vue组件

1.什么是组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织。
例如，我们可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

2.当不使用构建步骤时

当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <hdat v-for="item in items" v-bind:hd="item"></hdat>
</div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("hdat",{
        props:['hd'],
        template:'<p>{{hd}}</p>'
    })
    new Vue({
        el:"#app",
        data:{
            items:["java","python","c"]
        }
    });
</script>

在这里插入图片描述

Vue.component()：注册组件
cvzhanshi：自定义组件的名字
template：组件的模板
v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:course=“item”：将遍历的item项绑定到组件中props定义名为course属性上；= 号左边的course为props定义的属性名，右边的为item in items 中遍历的item项的值

3.当使用构建步骤时

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

使用组件
要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中，这个组件将会以默认导出的形式被暴露给外部。

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

若要将导入的组件暴露给模板，我们需要在 components 选项上注册它。这个组件将会以其注册时的名字作为模板中的标签名。

当然，我们也可以全局地注册一个组件，使得它在当前应用中的任何组件上都可以使用，而不需要额外再导入。关于组件的全局注册和局部注册两种方式的利弊

传递 props
Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。这里要用到 props 选项：

<!-- BlogPost.vue 子 -->
<script>
export default {
  props: ['title']
}
</script>

<template>
  <h4>{{ title }}</h4>
</template>

当一个值被传递给 prop 时，它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样，在模板和组件的 this 上下文中访问。

一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。

当一个 prop 被注册后，可以像这样以自定义 attribute 的形式传递数据给它

<BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
 />
<script>
export default {
  // ...
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
</script>

五、Axios异步通信

1.什么是Axios

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)
Vue.js是一个视图层框架并且作者严格准守SoC(关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。
Axios 使用简单,包尺寸小且提供了易于扩展的接口。

测试数据

{
  "name": "坏蛋阿土",
  "url": "https://so.csdn.net/so/search?spm=1000.2115.3001.4498&q=%E5%9D%8F%E8%9B%8B%E9%98%BF%E5%9C%9F&t=&u=",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "黑龙洞",
    "city": "黑龙山",
    "country": "玉屏县"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://bilibili.com"
    },
    {
      "name": "坏蛋阿土",
      "url": "https://yupin.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--v-cloak 解决闪烁问题-->
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
    <div>名字：{{info.name}}</div>
    <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
    <div>传送门：<a v-bind:href="info.url">点我</a> </div>
</div>
</body>
<!--引入vue,axios-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        //data:  前面用的data：是属性
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        country:null,
                        city:null,
                        street:null
                    },
                    url:null
                }
            }
        },
        mounted(){//钩子函数
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</html>

在这里插入图片描述

在这里使用了v-bind将href的属性与Vue实例中的数据进行绑定
使用axios框架的get方法请求数据，将响应的数据赋值给了data方法中info属性。
data中接收响应数据的属性的结构，须和json中响应回来的数据格式上对应匹配

六、Vue的生命周期

在这里插入图片描述

七、Vue的计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"坏蛋阿土"
        },
        methods:{
            currentTime1(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2(){//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;//这个数据刷新会重新计算
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</html>

在这里插入图片描述改变计算属性中的值，缓存清除，重新计算，否则，每次调用的都是缓存中的数据。可以减少计算带来的系统开销。

调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那那么可以考虑将结果不经常变化的缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销。

八、内容分发（插槽slot）

在Vue.js中我们使用元素作为承载分发内容的出口，可以称其为插槽，可以应用在组合组件的场景中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--里面的每一个标签都是一个插槽，插槽上插不同的组件，就是不同的东西，里面到底是什么全由组件决定，这就是一个架子-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :items="item" ></todo-items>
    </todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                       <slot name="todo-items"></slot>\
                    </ul>\
                   </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props:["items"],
        template:"<li>{{items}}</li>"
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"hdat",
            todoItems:['很坏-','很坏/','很坏、']
        }
    });
</script>
</html>

里面的每一个标签都是一个插槽，插槽上插不同的组件，就是不同的东西，里面到底是什么全由组件决定，这就是一个架子

在这里插入图片描述 自定义事件
删除按钮是在组件中的，点击删除按钮删除对应的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--里面的每一个标签都是一个插槽，插槽上插不同的组件，就是不同的东西，里面到底是什么全由组件决定，这就是一个架子-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :items="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                       <slot name="todo-items"></slot>\
                    </ul>\
                   </div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
    Vue.component("todo-items",{
        props:["items","index"],
        template:"<li>{{index}}{{items}}<button @click='remove'>删除</button></li>",
        methods: {
            remove: function (index) {
                this.$emit('remove',index);//自定义触发事件
            }
        }
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"hdat",
            todoItems:['很坏-','很坏/','很坏、']
        },
        methods: {
            removeItems: function (index) {
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</html>

在这里插入图片描述

九、vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板

预先定义好的目录结构及基础代码，就好比在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速.

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

1.配置环境

下载安装node.js
确认是否安装成功：

在cmd中运行node -v命令，查看是否能够输出版本号
在cmd中运行npm -v命令，查看是否能够输出版本号

如果想要快

npm install cnpm -g

npm install --registry=https://registry.npm.taobao.org
第一个打包时可能会有问题，第二个每次都加麻烦
所以在这里插入图片描述

安装vue-cli模块

cnpm install vue-cli-g

#测试是否安装成功
C:\Users\Administrator\AppData\Roaming\npm\node_modules
目录下会有vue-cli这个模块
#查看可以基于哪些模板创建vue应用程序

vue list

在这里插入图片描述这里选择使用webpack,他会向下兼容ES5

vue-cli程序
打开项目文件夹。地址栏cmd
输入命令

vue init webpack myvue

现在选择的先选no，不安装
Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果

初始化并运行
切换到项目目录下

cd myvue

安装依赖环境

npm install

运行

npm run dev

在这里插入图片描述

2.webpack的使用

WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用

npm install webpack -g
npm install webpack-cli -g

entry：入口文件，指定Web Pack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

webpacl-config.js

module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

执行命令

webpack

就会去找打包配置文件进行打包了

十、vue-router路由

安装vue-router

npm install vue-router --save-dev

报错解决：

npm install --legacy-peer-deps vue-router@3.5.2

vue与vue-router版本不兼容导致，第一条命令默认去安装最新的vue-router

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

使用
在这里插入图片描述

编写组件
mian.vue

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "main"
}
</script>

<style scoped>

</style>

content.vue

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

配置路由
在src下新建目录router
新建index.js，为路由的配置文件
index.js

import Vue from'vue'
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter);

//配置导出
export default new VueRouter({
  routes:[
    {
      //路由的路径
      path:'/content',
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      path:'/main',
      name:'mian',
      component:Main
    }
  ]
});

在main.js中挂上路由配置

import Vue from 'vue'
import App from './App'
import router from "./router";//1.自动扫描包里面的路由配置

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//2.配置路由
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Content from './components/Content'

export default {
  name: 'App',
  components: {
    Content
  }
}
</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>

在这里插入图片描述 router-link和router-view都要有

十一、vue+elementUi

layui的layer弹窗和layDate 日期与时间组件很好
https://docsify.js.org/# 文档生成
在这里插入图片描述 scss
https://www.bilibili.com/video/BV1WX4y1K7Lf/
https://blog.csdn.net/dxy3166216191/article/details/84201759

十二、路由嵌套

未完待续…

霍志杰

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE快速入门（跟随秦疆老师学习版）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。为什么使用VUE用一种编程语言，为CSS添加一些编程的特性，最终生成CSS文件。SASS：基于Ruby，通过服务端处理，功能强大，效率高。LESS：基于NodeJS，通过客户端处理，功能少一点，效率低一点。但足够使用。视图：html+css+js网络通信：axios页面跳转:vu
复制链接

扫一扫