vue入门----使用vue-cli搭建一个单页富应用

Posted 2020-09-06 奋斗中的屌丝

　　上面两节我们说了vue的一些概念，其实说的知识一点基础，这部分知识我觉得更希望大家到官网进行学习，因为在这里说的太多我觉得也只是对官网的照搬照抄而已。今天我们来学习一下vue-cli的一些基础知识，并且用vue-cli来搭建一个单页富应用。那么我们首先介绍一下什么是vue-cli?

　　首先要学习vue-cli，我觉得我们需要知道什么是cli吧！首先回到“原始”前端，什么是前端？无非就是html，css，js，虽然定义有些粗略。但是随着前端的不断发展，前端的内容越来越多，也越来越丰富。前端开发的革命性改进继续开展。这就有了MVVM框架。这里我给出我对mvvm的定义啊，如有不当请大家指出。mvvm是指的model，view，viewModel。我们具体解释一下它的含义： model：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。view： 值得是我们运用的的视图部分。viewModel: 其实这个是mvvm中最难的一块内容，这里我们可以简单的将其理解为view和model的中间层，就是它从model层获取数据，进行相应的处理之后传送给view层。为了更方面理解，我们举一个简单的例子。

<template>
    <div>show {{time}}</div>
<template>
<style scoped>
......
</style>
<script>
 export default{
    data: function(){
        time: ‘1992-11-14‘
    }
    methods: {
    ‘change‘: function () {
       ......
    }
}
</script>

这里我们给出一个简单的vue单文件组件，如果你看过vue的一些相关知识，我想你应该很容易看出这是什么意思。<template>部分表示的是view层，用于进行界面展示，

而script中的data部分就相当与model层。而methods中的change可能包含一些数据的获取，格式转化等等过程。这就是mvvm(个人理解啊）。

　　好像扯的有点远了，我们还是回归到脚手架中来，我们先看看什么是脚手架，为什么要使用脚手架？脚手架，这个概念其实比较宽泛吧，还是给出自己的理解，我觉得学习中能给出自己的理解是很好的，强记别人的理解确实是有点难受的。脚手架是什么？我觉得脚手架就是帮我们完成了一些基础的框架性的东西，让我们不用每次都去定义一个项目应该如何导出发行版本，如何引入所需要的包这一系列的内容。

　　下面开始使用vue-cli搭建单页富应用，首先我们应该安装vue-cli插件，vue install vue-cli --save。安装完成之后我们就可以通过命令vue init webpack <project-name>来创建一个基本的模板了。我们已经可以看到现在已经下载了基本文件了，但是现在还没完，我们还需要下载很多包，使用命令npm install自动下载。下载完成之后就算完成了。一个简单的单页富应用。